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,

  1. 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)
  2. Create new web part page and insert Content Editor web part
  3. 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.

  4. Add the URL of sample.html file to the content editor web part.
  5. Click OK to apply the changes to the web part and save the page.
  6. After the successful creation of the content type, the current page displays the success message with the content type name.

Output:

Add ContentType to the site using PnP JS
Fig 1: Add ContentType to the site using PnP JS
PnP-JS-Core: Create new custom content type in SharePoint
Tagged on:             

2 thoughts on “PnP-JS-Core: Create new custom content type in SharePoint

  • January 5, 2017 at 8:41 PM
    Permalink

    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..

    Reply
  • January 5, 2017 at 9:12 PM
    Permalink

    Ignore my previous question..

    Looks like “Inherits” is not exposed as a property. If I so something like {“Sealed”: “False”} it works fine..

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Wilcox l, lepine l, kieke b. I was mad at myself and my fibroid a lot of the time. viagra uk online marmwald.ro/collum/amricancallgirlsvideos.php?any=279614 Are there any developing treatments for uterine fibroids? Currently, researchers are looking into other methods of treating uterine fibroids. Anti-inflammatory painkillers this type of drug is often effective for women who experience occasional pelvic pain or discomfort. Call. 9 malignant neoplasm of cervix uteri 181 malignant neoplasm of placenta 182. ccrider.no/wff-279084/ Anti-inflammatory painkillers this type of drug is often effective for women who experience occasional pelvic pain or discomfort. proper age use viagra viagra dosage guide No differences were observed between groups regarding hrqol at 24-month follow-up. If you are looking for natural remedies for your uterine fibroids, these are some of the options available to you:. fewer side effects viagra viagra 9 malignant neoplasm of cervix uteri 181 malignant neoplasm of placenta 182. The relationship between fibroids and infertility remains a very active research area. Webmd communities connect with people like you, and get expert guidance on living a healthy life. can you use viagra high blood pressure http://espaciovisor.com/qzr-275963/ 22 (upi) -- uterine fibroids are common, non-cancerous growths that develop in the muscular wall of the uterus. However, occasionally, fibroids grow just under the endometrial lining in the uterus and end up protruding into the uterine cavity. http://ccjcourt.com/zqg-277173/ nbsp menopause news from medical news today noven's investigational nonhormonal menopause drug shows positive phase 3 results 4 oct 2012 | 2:00 am noven pharmaceuticals, inc. If you are looking for natural remedies for your uterine fibroids, these are some of the options available to you:. nbsp there are several disadvantages to the procedure. rosewoodanovel.com/xtz-279331/