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:
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">
-
- </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
-
-
-
- $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:
-
- $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">
-
- $pnp.setup({
- headers:
- {
- "Accept": "application/json; odata=verbose"
- }
- });
-
-
-
- $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.