Set the Master Page of the Host Web in SharePoint Hosted App 2013 using JavaScript.

SharePoint CSOM (Client Side Object Model) or apps are capable of performing almost all functions that server-side code provides. There are some limitations, but the CSOM is maturing with time.

In this article, I will tell you how to set the master page of the host web from the app web (app) using JavaScript. Host web and App web reside in different contexts at different levels of scope, so SharePoint doesn't allow app web contexts to set host web master page directly.

Steps to set the master page of the host web from App Web:
1. Create a SharePoint hosted app and add a module named "CustomMasterPage".

2. Download a copy of seattle.master from the Master Page gallery.
3. Copy and paste this file content into our modules .txt file and make custom changes to it as required (I have just changed the background colour and image for the demo).

Tip: Don't change the extension file (.txt) in the module; otherwise, it is not easy to read the file content.

4. Now create a namespace to avoid method and property conflicts.
5. Get appweb and hostweb URLs.
6. Set clientContext and hostWebContext.
7. Read the text of the above created .txt file using a jQuery ajax call.
8. Create a file (by code) in host web and set that as the master page.
9. It will be at the site and system master page level.

SharePoint Hosted App JavaScript Code

"use strict";
 
// create namespace.
window.VB = window.VB || {};
 
window.VB.HostWebApp = function () {
    var hostWebUrl,
        appWebUrl,
        context,
        hostWebContext,
        destinationServerRelativeUrl,
        masterPageFileName,
        // read the master page contents from text file.
        readFileFromAppWeb = function (appPageUrl, hostWebServerRelativeUrl, fileName) {
            destinationServerRelativeUrl = hostWebServerRelativeUrl;
            masterPageFileName = fileName;
 
            $.ajax({
                url: appPageUrl,
                type: "GET",
                async: false,
                cache: false,
                success: function (data) {
                    if (data !== null && data !== undefined && data.length > 0) {
                        uploadFileToHostWeb(destinationServerRelativeUrl, masterPageFileName, data);
                    } else {
                        alert("Failed to read file from app web.");
                    }
                },
                error: function (jqXhr, textStatus) {
                    alert("Request for page in app web failed: " + textStatus);
                }
            });
        },
        // upload file to host web.
        uploadFileToHostWeb = function (serverRelativeUrl, filename, contents) {
            var createInfo = new SP.FileCreationInformation();
            createInfo.set_content(new SP.Base64EncodedByteArray());
            var index;
            for (index = 0; i < contents.length; index = index + 1) {
                createInfo.get_content().append(contents.charCodeAt(index));
            }
            createInfo.set_overwrite(true);
            createInfo.set_url(filename);
            var files = hostWebContext.get_web().getFolderByServerRelativeUrl(serverRelativeUrl).get_files();
 
            context.load(files);
            files.add(createInfo);
            context.executeQueryAsync(setMasterPageSuccess, setMasterPageError);
        },
        setMasterPageSuccess = function () {
            $("#message").append(["<br /><div>Master Page in host web successfully: ", destinationServerRelativeUrl, "/", masterPageFileName, "</div>"].join(""));
            var masterPageUrl = ["/", hostWebUrl.split("/")[3], "/", hostWebUrl.split("/")[4], "/", destinationServerRelativeUrl, "/", masterPageFileName].join("");
            setMaster(masterPageUrl);
        },
        setMasterPageError = function (sender, args) {
            alert('Request failed,Error: ' + args.get_message() + '\n' + args.get_stackTrace());
        },
        // set master page on host web.
        setMaster = function (masterUrl) {
            var hostWeb = hostWebContext.get_web();
            hostWeb.set_masterUrl(masterUrl);
            hostWeb.update();
 
            context.load(hostWeb);
            context.executeQueryAsync(onSetMasterPageSuccess, onSetMasterPageFail);
        },
        onSetMasterPageSuccess = function () {
            $("#message").append("<br /><div>Master page updated successfully..</div>");
        },
        onSetMasterPageFail = function (sender, args) {
            alert("Failed to update master page on host web. Error:" + args.get_message());
        },
        getQueryStringParameterValue = function (paramToRetrieve) {
            var params = document.URL.split("?")[1].split("&"),
                paramsLength = params.length,
                index;
            for (index = 0; index < paramsLength; index = index + 1) {
                var singleParam = params[index].split("=");
                if (singleParam[0] == paramToRetrieve) {
                    return singleParam[1];
                }
            }
        },
        init = function () {
            appWebUrl = decodeURIComponent(getQueryStringParameterValue("SPAppWebUrl"));
            hostWebUrl = decodeURIComponent(getQueryStringParameterValue("SPHostUrl"));
 
            //load the required scripts.
            var scriptbase = hostWebUrl + "/_layouts/15/";
            $.getScript(scriptbase + "SP.Runtime.js",
            function () {
                $.getScript(scriptbase + "SP.js",
                    function () {
                        //to execute cross domain request.
                        $.getScript(scriptbase + "SP.RequestExecutor.js");
                    }
                );
            });
        };
 
    return {
        execute: function () {
            init();
 
            context = new SP.ClientContext.get_current();
            hostWebContext = new SP.AppContextSite(context, hostWebUrl);
 
            readFileFromAppWeb(appWebUrl + "/_catalogs/masterpage/CustomAppMaster.txt", "_catalogs/masterpage", "CustomAppMasterPage.master");
        }
    };
}();
 
(function () {
    window.VB.HostWebApp.execute();
}());

This code will work both for setting the Master Page of HostWeb and AppWeb by using appropriate context.

🚀 "Happy Coding" 🚀

SharePoint activates the feature using the REST API.

The REST API provides a simple and easy way to activate features at the site and web level..

I have created simple JavaScript code to activate the feature.

function activateFeature() {
    $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/features/add('7e2e2482-9007-4db3-8a7f-9bccd986ec4e')",
        type: "POST",
        headers: {
            "Accept": "application/json;odata=verbose", //return data format.
           "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
// perform operation on the response object.
        },
        error: function (err) {
            alert("Error: " + JSON.stringify(err));
        }
    });
}


Change the URI, and the feature will be activated based on the endpoint.

1. /web - then feature will be activated at the web level.
2. /site - then feature will be activated at the site collection level.

Now pass the feature GUID into the add method. You can get the GUID value by using the PowerShell command or by "SharePoint Manager 2013".

🚀 "Happy Coding" 🚀