Getting Page Field Value in custom publishing page layout

I wanted to create a custom publishing page layout which should render certain UI elements based on the page metadata. For e.g. a page metadata field called "Page Type" being used to display different links on pages (created with the page layout).

Surprisingly, first step in the process i.e. reading the page field using SharePoint Javascript API proved to be rather painful as my good friend google wasn't willing to put it on my plate.

Finally came up with some code to get this done so sharing below:----

Include this code into your custom publishing page layout to query page metadata fields within the layout:

/**************************************************************************************/

var pageItem; //variable for list item of page being displayed (which uses this page layout)

var pageFieldNameVar = '[internal name of a custom page field]'; //variable for page field to be retrieved

var context; // This variable will contain SharePoint Client Context

var rootWeb; // This variable will contain reference to root website of the site collection

//sets all global variables to establish the root website context

function setRootWebContext() {

    //getting root web of the site collection as it is assumed pages

    //will be stored in a library at root web level

    context = SP.ClientContext.get_current();

    var site = context.get_site();

    rootWeb = site.get_rootWeb();

}

//sets the pageItem global variable to establish the context for current page

function setPageContext() {

   

//_spPageContextInfo is defined in every SharePoint page and has pageListId and pageItemId

//properties populated in publishing pages

    var pageListId = _spPageContextInfo.pageListId;

    var pageItemId = _spPageContextInfo.pageItemId;

    if (rootWeb == null)

        setRootWebContext();

    //getting the list item for the current page

    var webLists = rootWeb.get_lists();

    var pageList = webLists.getById(pageListId);

    pageItem = pageList.getItemById(pageItemId);

}

//this function executes asynchronous request to get current page's field value

function getPageField(pageFieldName) {

    if (pageItem == null)

        setPageContext();

    //explicitly requesting to load the field Name for the page item

    context.load(pageItem, pageFieldName);

    //making the actual request

    context.executeQueryAsync(Function.createDelegate(this, function () { onPageFieldSuccess(pageFieldName); }), Function.createDelegate(this, function () { onPageFieldFailed(pageFieldName); }));

}

//this function is called automatically when request made by getPageField function is successful

function onPageFieldSuccess(pageFieldName) {

    //retreiving the page field value from page list item

    var fieldVal = pageItem.get_item(pageFieldName);

   

    //use fieldVal below to do something

}

//this function is called automatically when request made by getPageField function is unsuccessful

function onPageFieldFailed(pageFieldNameVar) {

           //do something to display error

}

//calling only getPageField function. This will eventually call other functions eventually rendering the links

getPageField(pageFieldNameVar);

/**************************************************************************************/


References:

Following article explained how to get item properties using SharePoint Javascript API: http://msdn.microsoft.com/en-us/library/ee539350.aspx

Ted Pattison explained about the magical _spPageContextInfo in the article below: http://blog.tedpattison.net/Lists/Posts/Post.aspx?ID=9