Retrieve Visible Fields From SharePoint List Using PnP JavaScript Library

Introduction

PnP-JS-Core library contains the number of extensible methods and properties, using which we can achieve the various actions in a simple code. To know more about this library component, visit the following links:

• Simplified JavaScript Library for SharePoint
• PnP-JS-Core Library

SharePoint has a lot of building blocks in the collections, which are used to form a SharePoint site. These are used in managing the content and generating the reports, based on the contents and settings etc.

Requirement

We got a requirement to show the fields, available for the list item in a list or library.

• To achieve the requirement, we are going to use the PnP JavaScript Library

Prerequisites

To use the PnP JS library, we should add the script file given below to the references in our code.

• Download pnp.js PnP JS file.
• Download fetch.js used by PnP js file to handle the Web requests and responses (Required in IE).
• Download es6-promise.js Used by PnP js file to handle web requests and responses (Required in IE).

Upload the above files to the library in SharePoint. Assume we have uploaded these files in Site Assets library for our example.

Code Skeleton

I have included all the above mentioned scripts and generated a skeleton code, given below, for adding the main code to retrieve the fields from the list:

<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
<script type="text/javascript" src="/siteassets/scripts/es6-promise.js"></script>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<div id="sample"></div>
<script type="text/javascript">
    //PnP Code snippet
</script>

Replace the PnP Code snippet with the actual code.

Solution

The following code snippet is used to get the visible fields information from SharePoint list, using PnP JavaScript library. Click here to read more about getting the visible fields from the list.

In our example, we have a sample list (Telephones Growth), which contains the following custom columns.  

• Year
• Telephones (In Millions)
• Wirelines 

//fields property returns all fields from the retrieved list
//then( ) runs on success
//catch( ) runs on failure
$pnp.sp.web.lists.getByTitle("Telephones Growth").fields.filter("ReadOnlyField eq false and Hidden eq false").get().then(function(result)
{
    var fieldInfo = "";
    for (var i = 0; i < result.length; i++) {
        fieldInfo += "Title: " + result[i].Title + "<br/>";
        fieldInfo += "Name:" + result[i].InternalName + "<br/>";
        fieldInfo += "ID:" + result[i].Id + "<br/><br/>";
    }
    document.getElementById("sample").innerHTML = fieldInfo;
}).catch(function(err) {
    alert(err);
});

Fields property from List object returns all the fields available for the specific SharePoint List. From all the fields, we have to apply the filter condition, given below, to retrieve the visible fields, available for the user to fill the details for the item.

Field ReadOnly == FALSE and Field Hidden == FALSE

Additional Notes

Supports SharePoint 2013, SharePoint 2016 and SharePoint Online.

For On-premise environment, PnP requests will not work properly since JSON Light is not enabled, by default. To enable, we have to modify the headers before calling PnP methods. Check PnP JSCore 1.0.1 for more information for setup / modifying the headers.

Insert the code snippet given below, before starting with PnP code:

//Set response type in headers
$pnp.setup({
    headers: {
        "Accept": "application/json; odata=verbose"
    }
});

Complete Code

Create a sample .HTML file and add the complete code, given below. Add a content editor Web part to the page and add sample .HTML file URL to the Web part.

<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
<script type="text/javascript" src="/siteassets/scripts/es6-promise.js"></script>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<div id="sample"></div>
<script type="text/javascript">
    //Set response type in headers
    $pnp.setup({
        headers:
        {
            "Accept": "application/json; odata=verbose"
        }
    });
    //fields property returns all fields from the retrieved list
    //then( ) runs on success
    //catch( ) runs on failure
    $pnp.sp.web.lists.getByTitle("TelePhones Growth").fields.filter("ReadOnlyField eq false and Hidden eq false").get().then(function(result)
    {
        var fieldInfo = "";
        for (var i = 0; i < result.length; i++)
        {
            fieldInfo += "Title: " + result[i].Title + "<br/>";
            fieldInfo += "Name:" + result[i].InternalName + "<br/>";
            fieldInfo += "ID:" + result[i].Id + "<br/><br/>";
        }
        document.getElementById("sample").innerHTML = fieldInfo;
    }).catch(function(err)
     {
        alert(err);
    });
</script>

Output

The code returns each field’s Title, Internal name and ID from SharePoint List. The output is shown below:



Conclusion

From this article, we learned to retrieve only the visible fields from SharePoint List / Library, using PnP JavaScript library. Click here to view the useful links for handling SharePoint with PnP JS Core Library.