SharePoint

Create A Publishing Page In SharePoint Using Javascript Object Model

SharePoint Publishing feature is one of the features which extends SharePoint functionality as a content management system. Once the publishing feature is activated, we can create the publishing pages with the different page layouts and associate it to the custom master page. This creates a unique look and feel and helps to customize the way, content is published. Publishing feature can be activated at the site collection and the site level.
feature
Once, it is activated, Pages library will be available in the site contents.
Pages
We can create the pages with the different page layouts in this library.

create pages

Let’s see, how we can do the same programmatically, using JavaScript Object Model.

Internal Implementation

  • Add the 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: createPublishingPage.
    1. SP.SOD.executeFunc('sp.js', 'SP.ClientContext', createPublishingPage);  
  • Instantiate client context, Web and Master Page Library instance.
    1. //Get client context and web object  
    2. var clientContext = new SP.ClientContext();  
    3. var oWeb = clientContext.get_web();  
    4. var oList = oWeb.get_lists().getByTitle('Master Page Gallery');  
  • Get the page layout by ID, using which, we will create a publishing page.  
    1. pageLayoutitem = oList.getItemById(2268);   
  • Load the client context and execute the batch.
    1. clientContext.load(oWeb);   
    2. clientContext.load(pageLayoutitem);   
    3. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  
  • In the success callback, create a publishing page, using PublishingPageInformation object.
    1. var newPublishingPage = SP.Publishing.PublishingWeb.getPublishingWeb(clientContext,oWeb);   
    2. var pageInfo = new SP.Publishing.PublishingPageInformation();   
    3. pageInfo.set_name("New Publishing Page.aspx");   
    4. pageInfo.set_pageLayoutListItem(pageLayoutitem);   
    5. newPage = newPublishingPage.addPublishingPage(pageInfo);   
  • Load the client context and execute the batch, once again.
    1. clientContext.load(newPage);   
    2. clientContext.executeQueryAsync(SecondQuerySuccess, SecondQueryFailure);  

Full Code

The full code to create the publishing page, using JavaScript object model is shown below:

  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.         var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";  
  5.         $.getScript(scriptbase + "SP.Runtime.js", function() {  
  6.             $.getScript(scriptbase + "SP.js", function() {  
  7.                 $.getScript(scriptbase + "SP.Publishing.js", createPublishingPage);  
  8.             });  
  9.         });  
  10.     });  
  11.     var oWeb, clientContext, pageLayoutitem;  
  12.   
  13.     function createPublishingPage() {  
  14.         //Get the client context,web and list object(Master Page Gallery)   
  15.         clientContext = new SP.ClientContext.get_current();  
  16.         oWeb = clientContext.get_web();  
  17.         var oList = oWeb.get_lists().getByTitle('Master Page Gallery');  
  18.         //Get the page layout by ID using which we will create a publishing page   
  19.         pageLayoutitem = oList.getItemById(2268);  
  20.         //Load the client context and execute the batch   
  21.         clientContext.load(oWeb);  
  22.         clientContext.load(pageLayoutitem);  
  23.         clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  
  24.     }  
  25.   
  26.     function QuerySuccess() {  
  27.         //Create Publishing Page using PublishingPageInformation object   
  28.         var newPublishingPage = SP.Publishing.PublishingWeb.getPublishingWeb(clientContext, oWeb);  
  29.         var pageInfo = new SP.Publishing.PublishingPageInformation();  
  30.         pageInfo.set_name("New Publishing Page.aspx");  
  31.         pageInfo.set_pageLayoutListItem(pageLayoutitem);  
  32.         newPage = newPublishingPage.addPublishingPage(pageInfo);  
  33.         //Load the new page object to the client context   
  34.         clientContext.load(newPage);  
  35.         clientContext.executeQueryAsync(SecondQuerySuccess, SecondQueryFailure);  
  36.     }  
  37.   
  38.     function QueryFailure(sender, args) {  
  39.         console.log('Request failed' + args.get_message());  
  40.     }  
  41.   
  42.     function SecondQuerySuccess(sender, args) {  
  43.         console.log("Publishing page created successfully.");  
  44.     }  
  45.   
  46.     function SecondQueryFailure(sender, args) {  
  47.         console.log('Request failed' + args.get_message());  
  48.     }  
  49. </script>  
Let’s see, how we can implement it in SharePoint. Save the scripts, mentioned above, onto a text file and upload it to Site Assets library.

SharePoint Implementation


  • Go to the edit settings of SharePoint page and click Web part from Insert tab.

    Web part

  • Add Content Editor Web part.

    Content Editor Web part

  • Click Edit Web art from Content Edit Web part. Assign the URL of the script text file and click Apply.

    Content Edit Web part

Output: The new publishing page has been created in the pages library.

Output

Summary

Thus, we have seen, how we can create a publishing page in SharePoint. This has been tried and tested in SharePoint 2016, as well as Office 365.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found