Create Publishing Page In SharePoint Host Web Using App

In this blog, I would like to share the code to create a publishing page from an existing page layout on SharePoint host Web and also we will see the code to set the created page as a welcome page, using JavaScript Object Model.

Make sure to refer to the js files, given below, in Default.aspx page-

<SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
   <SharePoint:ScriptLink name="sp.runtime.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
   <script type="text/javascript" src="../_layouts/15/sp.publishing.js"></script>

In app.js file, add the code, given below- 

//Declare varibales here
    var currentUser;
    var appCtxSite;
    //get Current Context
    var context = SP.ClientContext.get_current();
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
    $(document).ready(function () {
        console.log("page loading...");
        //Get host web URL
        var hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
        var appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
        var scriptBase = appWebUrl + "/_layouts/15/";
        $.getScript(scriptBase + "sp.publishing.js");
        //get app context using host web url
        appCtxSite = new SP.AppContextSite(context, hostWebUrl);
        //Get current user details
        // getUserName();
        $("#btnCreate").click(function () {
            CreatePublishingPage();
        });
    });
  //This method is used to create a publishing page
    function CreatePublishingPage() {
        var pageName = "customPage.aspx", pageTitle = "customPage";
        //get host web using app context site
        var web = appCtxSite.get_web();
        //get rootweb folder using hist web
        var rootFolder = web.get_rootFolder();
        //get publishing web
        var pubWeb =new SP.Publishing.PublishingWeb.getPublishingWeb(context, web);
        //load publishing web and root folder
        context.load(rootFolder);
        context.load(pubWeb);
        //get existing page layout using callback
        loadPageLayout(function (pageLayoutItem) {
            console.log("Page Creation is started");
            var pageInfo = new SP.Publishing.PublishingPageInformation();
            pageInfo.set_pageLayoutListItem(pageLayoutItem);
            pageInfo.set_name(pageName);
            var newPage = pubWeb.addPublishingPage(pageInfo);
            context.load(newPage);
            context.executeQueryAsync(function () {
                console.log("Page is created successfully");
                var listItem = newPage.get_listItem();
                context.load(listItem);
                context.executeQueryAsync(
                // Success callback after getting the actual list item that is  represented by the Publishing Page.We can now get its FieldValues, one of which is its FileLeafRef value.We can then use that value to build the Url to the new page and set the href or our link to that Url.
                    function () {
                        listItem.set_item("Title", pageTitle);
                        listItem.update();
                        listItem.get_file().checkIn();
                        listItem.get_file().publish("Publishing");
                        var currentPath = "Pages/" + pageName;
                        //Set custom page as welcome page
                        rootFolder.set_welcomePage(currentPath);
                        web.update();
                        rootFolder.update();
                        context.executeQueryAsync(function () {
                            console.log("successfully page is updated as welcome page..")
                        },
                        function (sender, args) {
                            console.log('Create page failed. ' + args.get_message());
                        });
                    },
             // Failure callback after getting the actual list item that is represented by the Publishing Page.
               function (sender, args) {
                   console.log('Get page failed. ' + args.get_message());

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

            });
        });
    }

// This function is executed if the above call fails
    function onfail(sender, args) {
        alert('Failed to add field in list. Error:' + args.get_message());
    }

    // this method used split the query string
    function manageQueryStringParameter(paramToRetrieve) {
        var params = document.URL.split("?")[1].split("&");
        var strParams = "";
        for (var i = 0; i < params.length; i = i + 1) {
            var singleParam = params[i].split("=");
            if (singleParam[0] == paramToRetrieve) {
                return singleParam[1];
            }
        }
    }

Note- In appmanifest.xml file, add the permission for the site collection. Finally the page will be created, using an existing template on your host Website.



Summary

In this blog, we have explored, how to create a publishing page and set the page as a welcome page, using SharePoint hosted app. Happy coding!!