PnP-JS-Core: Create new page in SharePoint library

Introduction

SharePoint Library is used to store the documents or files and metadata associated to those files. Some of the special type of libraries is used to store pages and components that can be utilized by SharePoint to display the data in those pages. There are 3 types of basic templates available in SharePoint to create the pages.

Page Template Types:

In this post,

we will see how to create a page in SharePoint library based on the page template using PnP JavaScript Component.

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,

Simplified JavaScript Library for SharePoint

PnP-JS-Core Library

Syntax:

$pnp.sp.web.getFolderByServerRelativeUrl(‘/folderurl’).files.addTemplateFile(‘/folderurl/filename.aspx’,TemplateFileTypeID).then(function(data){ console.log(data); });

Example:

The below steps and code snippet used to all create a web part page in Site Pages library 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
   [code lang=”js”]
   <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">
   //getFolderByServerRelativeUrl method returns the folder based on the folder’s relative url
   //files property returns all files from the folder
   //addTemplateFile with two parameters ‘New File Relative URL’ and ‘Template File Type’ used to create a new page

   $pnp.sp.web.getFolderByServerRelativeUrl("/SitePages")
   .files
   .addTemplateFile("/SitePages/webpartpage.aspx",0).then(function(result) {
   var pagename = result.data.Name; //New Page Name (ex., webppartpage.aspx)
   var strmessage = "";

   if (pagename != "") {
   strmessage += "Page ‘" + pagename + "’ created successfully!<br/>";
   strmessage += "Click <a href=’" + result.data.ServerRelativeUrl + ‘">here</a> to open that page.";
   document.getElementById("sample").innerHTML = strmessage;
   }
   }).catch(function(err) {
   console.log(err);
   });

   //To create Wiki Page, use addTemplateFile("/SitePages/wikipage.aspx",1)
   //To create Form page, use addTemplateFile("/SitePages/formpage.aspx",2)

   </script>
   [/code]

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 page based on the template, the current page displays the success message and a link to that page.