PnP-JS-Core library contains the number of extensible methods and properties. By using that we can achieve the various actions in a simple code. To know more about this library component, visit the below links,
In this post, we will learn on
How to create a custom content type in SharePoint site using PnP JavaScript Library
Syntax
The following syntax requires some parameters for creating a custom content type
- id – Id for the ContentType (also determines the parent Content Type)
- name – Name of the Content Type
- description – Description of the content type
- group – The group in which to add the content type
- additionalsettings – Any additional settings to provide when creating the content type
pnp.sp.web.contentTypes.add( id, name, description, group, additionalSettings ).then(function(result){});
Note: This method is available from 1.0.6 version of PnP JS Core Component.
Example:
The below steps and code snippet used to add a new custom content type to the current web using PnP JavaScript Component,
- Download Required files to use PnP-JS-Core library from the below links and upload that to Site Asstes or Style Library
- Download pnp.js PnP JS file
- Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
- Download promise.js Used by PnP js file to handle web requests and responses (Required in IE)
- Create new web part page and insert Content Editor web part
- Create a sample.html file in Site Assets or Style library and insert the below code snippet
<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script> <script type="text/javascript" src="/siteassets/scripts/es6-promise.js"></script> <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script> <div id="sample"></div> <script type="text/javascript"> //contentTypes property of web object returns the collection of content types associated to the web //add method adds a new custom content type to the collection of the SharePoint web $pnp.sp.web.contentTypes.add( "0x01004F51EFDEA49C49668EF9C6744C8CF87E", "PnP Item", "This is the Content Type created using PnP JS", "PnP Group", {}).then(function(result) { var ctname = result.data.Name; var strmessage = ""; if (ctname != "") { strmessage += "ContentType '" + ctname + "' is added successfully!" document.getElementById("sample").innerHTML = strmessage; } }).catch(function(err) { console.log(err); }); </script>
Note: we can add more properties to the content type on creation using addtionalSetting paramater.
- Add the URL of sample.html file to the content editor web part.
- Click OK to apply the changes to the web part and save the page.
- After the successful creation of the content type, the current page displays the success message with the content type name.
January 5, 2017 at 8:41 PM
Thanks for this example.
How do we pass the additionalSettings? Does not seem to work.
For example, I am trying to set “Inherits” as “True” while creating the content type.
This works:
web.contentTypes.add(“0x01004F51EFDEA49C49668EF9C6744C8CF87E”, “PnP Item”, “This is the Content Type created using PnP JS”, “PnP Group”, {})
But this does NOT:
web.contentTypes.add(“0x01004F51EFDEA49C49668EF9C6744C8CF87E”, “PnP Item”, “This is the Content Type created using PnP JS”, “PnP Group”, {“Inherits”: “True”})
I am not sure if the way of passing additional info is correct.
Can you please help..
January 5, 2017 at 9:12 PM
Ignore my previous question..
Looks like “Inherits” is not exposed as a property. If I so something like {“Sealed”: “False”} it works fine..
December 17, 2018 at 3:44 PM
Can we update the Existing content type ? to add new column ?