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.

Once, it is activated, Pages library will be available in the site contents.

We can create the pages with the different page layouts in this library.



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

Internal Implementation

• Add the reference to jQuery file.
  

  <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <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.
  

  SP.SOD.executeFunc('sp.js', 'SP.ClientContext', createPublishingPage);

• Instantiate client context, Web and Master Page Library instance.
  

  //Get client context and web object
  var clientContext = new SP.ClientContext();
  var oWeb = clientContext.get_web();
  var oList = oWeb.get_lists().getByTitle('Master Page Gallery');

• Get the page layout by ID, using which, we will create a publishing page.  
  

  pageLayoutitem = oList.getItemById(2268);

• Load the client context and execute the batch.
  

  clientContext.load(oWeb);
  clientContext.load(pageLayoutitem);
  clientContext.executeQueryAsync(QuerySuccess, QueryFailure);

• In the success callback, create a publishing page, using PublishingPageInformation object.
  

  var newPublishingPage = SP.Publishing.PublishingWeb.getPublishingWeb(clientContext,oWeb);
  var pageInfo = new SP.Publishing.PublishingPageInformation();
  pageInfo.set_name("New Publishing Page.aspx");
  pageInfo.set_pageLayoutListItem(pageLayoutitem);
  newPage = newPublishingPage.addPublishingPage(pageInfo);

• Load the client context and execute the batch, once again.
  

  clientContext.load(newPage);
  clientContext.executeQueryAsync(SecondQuerySuccess, SecondQueryFailure);

Full Code

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

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";
        $.getScript(scriptbase + "SP.Runtime.js", function() {
            $.getScript(scriptbase + "SP.js", function() {
                $.getScript(scriptbase + "SP.Publishing.js", createPublishingPage);
            });
        });
    });
    var oWeb, clientContext, pageLayoutitem;

    function createPublishingPage() {
        //Get the client context,web and list object(Master Page Gallery)
        clientContext = new SP.ClientContext.get_current();
        oWeb = clientContext.get_web();
        var oList = oWeb.get_lists().getByTitle('Master Page Gallery');
        //Get the page layout by ID using which we will create a publishing page
        pageLayoutitem = oList.getItemById(2268);
        //Load the client context and execute the batch
        clientContext.load(oWeb);
        clientContext.load(pageLayoutitem);
        clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
    }

    function QuerySuccess() {
        //Create Publishing Page using PublishingPageInformation object
        var newPublishingPage = SP.Publishing.PublishingWeb.getPublishingWeb(clientContext, oWeb);
        var pageInfo = new SP.Publishing.PublishingPageInformation();
        pageInfo.set_name("New Publishing Page.aspx");
        pageInfo.set_pageLayoutListItem(pageLayoutitem);
        newPage = newPublishingPage.addPublishingPage(pageInfo);
        //Load the new page object to the client context
        clientContext.load(newPage);
        clientContext.executeQueryAsync(SecondQuerySuccess, SecondQueryFailure);
    }

    function QueryFailure(sender, args) {
        console.log('Request failed' + args.get_message());
    }

    function SecondQuerySuccess(sender, args) {
        console.log("Publishing page created successfully.");
    }

    function SecondQueryFailure(sender, args) {
        console.log('Request failed' + args.get_message());
    }
</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.
  
  
  
  
• Add Content Editor Web part.
  
  
  
  
• Click Edit Web art from Content Edit Web part. Assign the URL of the script text file and click Apply.
  
  
  

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



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.