Working With Content Types In SharePoint 2016 And Office 365 Using JavaScript Object Model

Content types in SharePoint can be considered to be a reusable collection of metadata, Workflows, Event Receivers etc.: Thus, content types can be said to govern the behavior of the list or library, it is attached to. We can create the content types at the list level, as well as, the site level. Site Level Content Types can be created out of the box, as well as programmatically. However, the list level content types can be created only by deploying it as a list definition or by programmatic object model.



We can create and delete the site content types out of the box from the site content type page, as shown, above in SharePoint 2016. Let’s see, how we can do the same programmatically, using JavaScript object model.

Internal Implementation

Scope of the article is,

• List all existing content type
• Create a new site content type
• Delete an existing content type

All of these operations will be done, using JavaScript object model.

List all existing Content Types

Let’s see, how to list all the existing content types, using JSOM.

• Add reference to jQuery file.
  
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  2. <script language="javascript" type="text/javascript">
• Within Document ready function, call SP.SOD.executeFunc, so as to load the on demand script SP.js . Call the main starting point function say: ‘listAllListCT’
  
  1. SP.SOD.executeFunc('sp.js', 'SP.ClientContext', listAllListCT);
• Instantiate the client context, Web and content type instance.
  
  1. var clientContext = new SP.ClientContext.get_current();
  2. oRootWeb = clientContext.get_site().get_rootWeb();
  3. oWebContentTypes=oRootWeb.get_contentTypes();
• Load the client context and execute the batch.
  
  1. clientContext.load(oWebContentTypes);
  2. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
• In the case of success, call-back gets the content type enumerator collection and loops through it.
  
  1. var oWebCTEnumerator = oWebContentTypes.getEnumerator();
  2. console.log("Total count of Site CT is : " + oWebContentTypes.get_count() + '\n');
  3. console.log("The available Site content types are : ");
  4. while (oWebCTEnumerator.moveNext()) {
  5. console.log(oWebCTEnumerator.get_current().get_name() + '\n');
  6. }
  Output
  
  
  
  Full Code
  
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  2. <script language="javascript" type="text/javascript">
  3. $(document).ready(function() {
  4. SP.SOD.executeFunc('sp.js', 'SP.ClientContext', listAllListCT);
  5. });
  6. var oWebContentTypes;
  8. function listAllListCT() {
  9. //Get Client Context,Root Web of Site,Site CT Collection Objects
  10. var clientContext = new SP.ClientContext.get_current();
  11. oRootWeb = clientContext.get_site().get_rootWeb();
  12. oWebContentTypes = oRootWeb.get_contentTypes();
  13. //Load Client Context and Execute the batch
  14. clientContext.load(oWebContentTypes);
  15. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
  16. }
  18. function QuerySuccess() {
  19. //Get Web Enumerator and loop through the CT Collection
  20. var oWebCTEnumerator = oWebContentTypes.getEnumerator();
  21. console.log("Total count of Site CT is : " + oWebContentTypes.get_count() + '\n');
  22. console.log("The available Site content types are : ");
  23. while (oWebCTEnumerator.moveNext()) {
  24. console.log(oWebCTEnumerator.get_current().get_name() + '\n');
  25. }
  26. }
  28. function QueryFailure(sender, args) {
  29. console.log('Request failed - ' + args.get_message());
  30. }
  31. </script>

Add Content Type

Now, let’s see how to add a new site content type.

• Add reference to jQuery file.
  
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  2. <script language="javascript" type="text/javascript">
• Within document ready function, call SP.SOD.executeFunc, so as to load the on demand script SP.js . Call the main starting point function say: ‘addSiteCT’.
  
  1. SP.SOD.executeFunc('sp.js', 'SP.ClientContext', addSiteCT);
• Instantiate the client context, Web and list instance.
  
  1. clientContext = new SP.ClientContext.get_current();
  2. var oWeb = clientContext.get_web();
• Get Site Content type Collection and Parent Site Content type Object.
  
  1. oSiteContentTypeCollection = oWeb.get_contentTypes();
  2. var oSiteCT = oSiteContentTypeCollection.getById("0x0101");
• Create site content type instatntiating ContentTypeCreationInformation object.
  
  1. var newSiteCT = new SP.ContentTypeCreationInformation();
  2. newSiteCT.set_name('Project Tracker CT');
  3. newSiteCT.set_parentContentType(oSiteCT);
  4. newSiteCT.set_group("Custom Content Types");
  5. newSiteCT.set_description('This is a Project Tracker Content Type');
  6. oSiteContentTypeCollection.add(newSiteCT);
• Load the client context and execute the batch.
  
  1. clientContext.load(oSiteContentTypeCollection);
  2. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
  Output
  
  
  
  
  
  Full Code
  
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  2. <script language="javascript" type="text/javascript">
  3. $(document).ready(function() {
  4. SP.SOD.executeFunc('sp.js', 'SP.ClientContext', addSiteCT);
  5. });
  7. function addSiteCT() {
  8. //Get Client Context and Web object
  9. clientContext = new SP.ClientContext.get_current();
  10. var oWeb = clientContext.get_web();
  11. //Get Site CT Collection and Parent Site CT Object
  12. oSiteContentTypeCollection = oWeb.get_contentTypes();
  13. var oSiteCT = oSiteContentTypeCollection.getById("0x0101");
  14. //Create Site CT and add to the Site CT Collection
  15. var newSiteCT = new SP.ContentTypeCreationInformation();
  16. newSiteCT.set_name('Project Tracker CT');
  17. newSiteCT.set_parentContentType(oSiteCT);
  18. newSiteCT.set_group("Custom Content Types");
  19. newSiteCT.set_description('This is a Project Tracker Content Type');
  20. oSiteContentTypeCollection.add(newSiteCT);
  21. //Load Client Context and Execute the batch
  22. clientContext.load(oSiteContentTypeCollection);
  23. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
  24. }
  26. function QuerySuccess() {
  27. console.log("Site Content Type added successfully");
  28. }
  30. function QueryFailure(sender, args) {
  31. console.log('Request failed - ' + args.get_message());
  32. }
  33. </script>

Delete the existing Site Content type

We can delete the content type, either by using its ID or by getting the content type collection and deleting the specific content type by looping through it. The content type ID can be obtained from the content type page’s address bar.



Once we get the content type ID, we can call the ‘deleteObject’ method on the content type object, as shown in the code, given below:

Full Code
Let’s see, how we can implement it in SharePoint. Save the scripts, given above, onto a text file and upload it to Site Assets library.

SharePoint Implementation

• Go to the edit settings of the SharePoint page and click Web part from Insert tab.
  
  
  
  
• Add Content Editor Web part.
  
  
  
  
• Click on Edit Web art from Content Edit Web part. Assign the URL of the script text file and click Apply.
  
  
  
  Output
  
  
  
  
  
  Thus, as you can see the Projects Tracker CT has been removed from the site content types.

Summary

In this article, we saw, how to list out all the site content types. Create a new site content type and delete an existing content type, using JavaScript object model. This has been tried and tested in both SharePoint 2016 and Office 365(SharePoint Online).