AnswerBun.com

Get Page Field Values with javascript

SharePoint Asked by Rothrock on January 2, 2022

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.

2 Answers

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>')

Answered by BigRaj on January 2, 2022

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.

enter image description here

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)/[email protected]=" + 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

enter image description here

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.

enter image description here

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.

enter image description here

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

Answered by Siddharth Vaghasia on January 2, 2022

Add your own answers!

Related Questions

Can I change favicon without modifying the master page?

3  Asked on January 4, 2022 by default_noob_network

   

Add link to button in infopath

1  Asked on January 4, 2022 by j-choe

       

Get Page Field Values with javascript

2  Asked on January 2, 2022 by rothrock

       

I’ve sharepoint 2013 farm last updated June 2014

1  Asked on December 31, 2021 by ahmed-alsharkawy

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP