Post
Ask Question

Add Content Type In Existing SharePoint List Using JSOM

In this blog I would like to share the code for adding the content type in existing SharePoint list using SP hosted app model.
Write the below code on your *.js file,
  1. //get Current Context  
  2. var context = SP.ClientContext.get_current();  
  3. // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
  4. $(document).ready(function () {  
  5. console.log("page loading...");  
  6. $("#btnCreate").click(function () {  
  7. addContenType();  
  8. });  
  9. });  
  10.   
  11. //This method is used to add the content type on exisiting list.  
  12. function addContenType() {  
  13. //Get host web URL  
  14. var hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));  
  15. //get app context using host web url  
  16. var appCtxSite = new SP.AppContextSite(context, hostWebUrl);  
  17. //get current web  
  18. var currentWEB = appCtxSite.get_web();  
  19. //get list from host web  
  20. var lists = currentWEB.get_lists();  
  21. //get rootweb  
  22. var rootWeb = appCtxSite.get_site().get_rootWeb();  
  23. //Get all content types from root web site  
  24. var allContentTypeColl = rootWeb.get_contentTypes();  
  25. //load the web , lists & content types  
  26. context.load(rootWeb);  
  27. context.load(allContentTypeColl);  
  28. context.load(lists);  
  29. context.executeQueryAsync(function () {  
  30. var CTypeID;  
  31. var contentTypeName = "customTestCT";  
  32. //Get the Content type ID , if we know content type id we dont want to get the id again  
  33. var contentTypeEnum = allContentTypeColl.getEnumerator();  
  34. while (contentTypeEnum.moveNext()) {  
  35. var currentCT = contentTypeEnum.get_current();  
  36. if (currentCT.get_name() == contentTypeName) {  
  37. CTypeID = currentCT.get_stringId();  
  38. break;  
  39. }  
  40. }  
  41. var testList = appCtxSite.get_web().get_lists().getByTitle("SampleList1");  
  42. //Enable the content type in custom list  
  43. testList.set_contentTypesEnabled(true);  
  44. testList.update();  
  45. context.load(testList);  
  46. var webContentTypes = appCtxSite.get_site().get_rootWeb().get_contentTypes();  
  47. var listCollectionCT = testList.get_contentTypes();  
  48. var customCT = webContentTypes.getById(CTypeID);  
  49. //then add the existing content type using content type id  
  50. listCollectionCT.addExistingContentType(customCT);  
  51. //then load the list collection content types  
  52. context.load(listCollectionCT);  
  53. var folder = testList.get_rootFolder();  
  54. context.load(folder, 'ContentTypeOrder');  
  55. context.executeQueryAsync(function () {  
  56. //ordered the content type folder.set_uniqueContentTypeOrder(folder.get_contentTypeOrder().reverse());  
  57. folder.update();  
  58. context.executeQueryAsync(  
  59.   
  60. function () {  
  61. console.log("Content type was added");  
  62.   
  63. },  
  64.   
  65. function () {  
  66. console.log("Error in Adding Content Type" + args.get_message());  
  67.   
  68. });  
  69. }, function (sender, args) { onfail(sender, args); });  
  70. }, function (sender, args) { onfail(sender, args); });  
  71. }  
  72.   
  73. // This function is executed if the above call fails  
  74. function onfail(sender, args) {  
  75. alert('Failed to add content type in list. Error:' + args.get_message());  
  76. }  
  77.   
  78. // this method used split the query string  
  79. function manageQueryStringParameter(paramToRetrieve) {  
  80. var params = document.URL.split("?")[1].split("&");  
  81. var strParams = "";  
  82. for (var i = 0; i < params.length; i = i + 1) {  
  83. var singleParam = params[i].split("=");  
  84. if (singleParam[0] == paramToRetrieve) {  
  85. return singleParam[1];  
  86. }  
  87. }  
  88. }  
Note - Please make sure to provide the permission to web in app manifest file
 
Finally custom content type will be added successfully on your existing list.
 
Summary
 
In this blog we have explored how to add the content type on existing SharePoint list form SharePoint hosted app model with JavaScript object model.