Get Page Field Values with javascript

Question

We are using SP 2013 publishing features and have the document id service turned on for our site collection. So each new page has a document id assigned to it.

We also created a custom content type for our pages which includes some additional metadata -- some managed metadata fields and a couple of text fields.

We want to right some custom javascript code that uses the document id and managed meta data associated with the page.

If I add a Page Field Filter into a webpart zone on the page I see that the filter has access to the various values in the columns we added.

I'm trying to figure out if there is a way to access those using javascript. I've searched, but the combination of page field brings in too many unrelated things having to do with pages and fields.

So is there a way to get those values using javascript?

Also is there a list of what Page Fields exist by default? I can't find any documentation on them.

Edit

I found that when I'm in a content search web part I can query the fields on the page with {Page.Fieldname}. The field name seems to be the internal name, for example Document ID seems to be _dlc_DocId

Still trying to find a way to list all that is available and to figure out how to get it using javascript.

Answer 1

This would be long answer :) but I have given you code also to try it our from your side.

First please note, Pages is like any other document library. You can go to Pages Library settings to view all the fields available for particular page library.

Q. Also is there a list of what Page Fields exist by default? I can't find any documentation on them.

Go to Pages Library -> Go to Library settings, you would be on below page with your parameters List=".........."

https://contoso.sharepoint.com/sites/mysitecollection/_layouts/15/listedit.aspx?List=%7Bdfefaf2f-00f1-1232-2232-69078b786c15%7D

scroll little down you will see fields of page library.

Q. Get Internal Name of Field from UI

Click on any column displayed in above screenshot, you would be redirected to below url

https://contoso.sharepoint.com/sites/mysitecollection/_layouts/15/FldEdit.aspx?List%7Bdfefaf2f-00f1-1232-2232-69078b786c15%7D&Field=ArticleStartDate

If you look closely &Field=ArticleStartDate is at end of URL. This is your internal name of Field Article Start Date

Q. How to get Pages Library Fields from Javascript

Here we can do using JSOM or REST API, I will show example with REST API.

What I did is created txt file which you can refer in content editor webpart to test the demo. copy below code in txt file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script>
function getfields(){

var url = "/_api/Web/Lists/GetByTitle('Pages')/Fields?&$select=StaticName,Title,TypeAsString,Hidden";
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + url,
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {

            console.log("");
         $('#fieldList').DataTable( {
        aaData: data.d.results,
        "aoColumns": [  
            {    
                "mData": "StaticName"    
            },   
            {    
                "mData": "Title"    
            },   
            {    
                "mData": "TypeAsString"    
            },   
            {    
                "mData": "Hidden"    
            }
            ]  
    } );
    $('#fieldList').show();
            return false;
        },
        error: function (error) {
            alert(JSON.stringify(error));
            return false;
        }
    });

}

function getvalues(){

var url = "/_api/Web/Lists/GetByTitle('Pages')/Items(@v0)/FieldValuesAsText?@v0=" + 1;
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + url,
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {


            var textedJson = JSON.stringify(data.d, undefined, 4);
            $('#myTextarea').show();
            $('#myTextarea').text(textedJson);
            return false;
        },
        error: function (error) {
            alert(JSON.stringify(error));
            return false;
        }
    });

}
</script>



Using this button to get Available Page Fields<button onclick="javascript:getfields();return false;"> Get Pages Library Available Fields </button>

</br>
Enter Page Item ID To Retrieve Field Values of Page : <input id="PageItemID" >
<button onclick="javascript:getvalues();return false"> Get Page Field Values</button>

<textarea style="display:none;width: 100%;min-height: 30rem;font-size: 0.8rem;line-height: 1.2; name="" id="myTextarea" cols="30" rows="10"></textarea>

<table id="fieldList" style="width:100%;display:none">
   <thead>    
            <tr>    
                <th>StaticName</th>    
                <th>Title</th>    
                <th>TypeAsString</th>    
                <th>Hidden</th>    
            </tr>    
        </thead>    
</table>

Add a content editor webpart of any page and add reference to above save txt file.

On page load you would get below screen

click on 'Get Pages Library Available Fields', you will get all the available fields, please note that this will give you all fields, OOTB, hidden, custom fields for all content types, it will give you display name, internalname(StaticName), Field Type, and Hidden, whether it is hidden or not.

Now to retrieve field values of particular page, Enter Page Id(item id of Page), and click on 'Get Page Field Values'. It will show you json object in text area with field name and its value.

Hope this helps..Happy coding..!!!

Answer 2

Unfortunately I don't believe that it can be loaded without a round trip to the server via JSOM or REST. One option I've used in the past is using a function on page load to populate an object by add this to the page.

var PageObject = function(){
  var ctx = new SP.ClientContext.get_current(),
      page = ctx.get_web().get_lists().getById(_spPageContextInfo.pageListId).getItemById(_spPageContextInfo.pageItemId);
  ctx.load(page);
  ctx.executeQueryAsync(
    function(){
      _spPageContextInfo.pageObject = page;
    },
    function(sender, args){
      console.error(args.get_message);
    }
  );
}
_spBodyOnLoadFunctionNames.push(PageObject);

The items can then be accessed via JavaScript by _spPageContextInfo.pageObject.get_item('<Field Name>')