Update Page Layout by using JavaScript (JSOM) in Office 365 | José Quinto

Introduction

I’m going to show how to update or change the page layout for a given SharePoint page. That sounds quite straightforward, but we have to mind some important bits:

• Check in, check out status of the current page or item we are changing.
• CAML query using Page Layout as a FieldRef filter
• Use SP.FieldUrlValue to update the Page Layout property.

Assumptions

I’d like to share the JSOM (JavaScript) code having in mind these assumptions:

• we already have both layouts in the _catalogs/masterpage library
• we are executing the JS code in the subsite in which we want to update the pages
• we are iterating thru all the pages currently using pageLayoutToChange and set to them the new layout.

Code

	var pageLayoutToChange = 'BlankWebPartPage.aspx';
	var newPageLayout = { url: '/sites/intranet/_catalogs/masterpage/NewPageLayout.aspx' , description: 'New Page Layout' };
	var context = SP.ClientContext.get_current();
	var allprop = context.get_web().get_allProperties();
	context.load(allprop);
	context.executeQueryAsync(
	function ()
	{
	pagesListID = allprop.get_item("__PagesListId");
	var pagesList = context.get_web().get_lists().getById(pagesListID);
	var camlQuery = new SP.CamlQuery();
	camlQuery.set_viewXml('<View><Query><Where><Contains><FieldRef Name=\'PublishingPageLayout\'/>' +
	'<Value Type=\'URL\'>' + pageLayoutToChange + '</Value></Contains></Where></Query><RowLimit>10</RowLimit></View>');
	var collListItem = pagesList.getItems(camlQuery);
	context.load(collListItem);
	context.executeQueryAsync(
	function (sender, args)
	{
	var listItemInfo = '';
	var listItemEnumerator = collListItem.getEnumerator();
	while (listItemEnumerator.moveNext()) {
	var oListItem = listItemEnumerator.get_current();
	// Check the check out status
	var me = context.get_web().get_currentUser();
	var file = oListItem.get_file();
	var checkoutUser = file.get_checkedOutByUser();
	context.load(file);
	context.load(me);
	context.load(checkoutUser);
	context.executeQueryAsync(
	function (sender, args)
	{
	if(file.get_checkOutType() === SP.CheckOutType.none) {
	// The file is not checked out
	console.log('The file is not checked out');
	file.checkOut();
	} else {
	// The File is checked out
	console.log('The file is checked out');
	if (checkoutUser && checkoutUser.get_id() !== me.get_id()) {
	// The file is checked out by other user
	console.log('The file is checked out by other user');
	file.undoCheckOut();
	file.checkOut();
	} else {
	// The file is checked out by me
	console.log('The file is checked out by me');
	}
	}
	context.load(file);
	var newSPFieldUrl = new SP.FieldUrlValue();
	newSPFieldUrl.set_url(newPageLayout.url);
	newSPFieldUrl.set_description(newPageLayout.description);
	oListItem.set_item('PublishingPageLayout', newSPFieldUrl);
	oListItem.update();
	context.load(oListItem);
	file.checkIn();
	file.publish();
	context.load(file);
	context.executeQueryAsync(
	function () {
	console.log('Page layout updated!');
	console.log(oListItem);
	},
	function (sender, args) {
	console.log('Error: ' + args.get_message());
	}
	);
	},
	function (sender, args) {
	console.log('Error: ' + args.get_message());
	}
	);
	}
	},
	function (sender, args)
	{
	console.log('Error: ' + args.get_message());
	}
	);
	},
	function(sender,args)
	{
	console.log(args.get_message())
	}
	);

view raw JQ.SharePoint.JSOM.UpdatePageLayout.js hosted with ❤ by GitHub