How to create master page file dynamically using JavaScript in SharePoint 2013 Online?

Question

I am creating one SharePoint App in that I want do following.

In master page gallery, copy current master page and create new master page. (as we do new SharePoint Designer manually.)
Inject JavaScript reference in new master page and save it.
Apply new master page as default master page.

All these should be done using JavaScript only.

Does anybody know how to do ?

Thanks user988917

score 1 · Answer 1 · edited Mar 28 '16 at 08:26

To get current master page, make a GET request to following end-point

/_api/Web?$select=CustomMasterUrl,MasterUrl

To change current master page,

function MastePageChange() {
var clientcontext;
var cweb;
var customMasterURL = '/_catalogs/masterpage/NewMasterPage.master';
clientcontext = new SP.ClientContext.get_current();
cweb = clientcontext.get_web();
cweb.set_customMasterUrl(masterPageUrl);
cweb.set_masterUrl(masterPageUrl);
cweb.update();
clientcontext.executeQueryAsync(function() {
    alert("Master Page has been changed successfully \n" + customMasterURL);
}, function(sender, args) {
    alert("Error: " + args.get_message());
});
}

score 0 · Answer 2 · answered Oct 25 '13 at 17:57

I haven't tried this in JS but usually there are equivalent methods so looking at sever side code helps. http://blog.vegaitsourcing.rs/2008/10/programmatically-uploading-master-pages.html Here is also a sample of how to upload files using JS (only works with HTML5 browsers I believe)http://msdn.microsoft.com/en-us/library/jj163201.aspx

The tricky thing is going to be the file manipulation (injecting the JS)... I don't see a good way to do that purely from JS, you will likely need some server side code to crack open the file and inject new code, save it and then upload it back.

score 0 · Answer 3 · edited Nov 01 '13 at 18:22

To modify Masterpages, I'd recommend taking a look at these two resources.

First, a blog post that explains how to apply master pages:

arichterwork.blogspot.com/2008/03/programmatically-inherit-master-page.html

E.g. web.MasterUrl = "/_layouts/custom.master"

Next the SharePoint JavaScript API reference on Core objects, the Web in this case:

msdn.microsoft.com/EN-US/library/office/jj245288.aspx

You can see that both masterUrl and customMasterUrl are available R/W.

Finally, you'll want to do some basic file manipulation. Here are the MSDN resources:

msdn.microsoft.com/en-us/library/jj163201.aspx#BasicOps_FileTasks

There are two more challenges. The first is about permissions: updating the masterpage gallery is a high privilege operation. The other, riskier, challenge here is that you're injecting JS into pages, and JS can be used maliciously.

If you planned to use this approach with an app for SharePoint, I'd consider finding an alternative approach. Script injection like this is not permitted.

How to create master page file dynamically using JavaScript in SharePoint 2013 Online?

3 Answers3