Shantha Kumar T
PnP-JS-Core: Get all non-hidden lists from SharePoint site
PnP-JS-Core library contains the number of extensible methods and properties. By using that we can achieve the various actions in a simple code. To know more about this library component, visit the below links,
Simplified JavaScript Library for SharePoint
This post explains,
How to get all non-hidden (visible) lists from SharePoint site using PnP JavaScript Library.
Syntax:
$pnp.sp.web.lists.filter(‘Hidden eq false‘).get().then(function(result){})
Example:
The below steps and code snippet used to all visible lists & libraries from SharePoint site using PnP JavaScript library,
- Download Required files to use PnP-JS-Core library from the below links and upload that to Site Asstes or Style Library
- Download pnp.js PnP JS file
- Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
- Download promise.js Used by PnP js file to handle web requests and responses (Required in IE)
- Create new web part page and insert Content Editor web part
- Create a sample.html file in Site Assets or Style library and insert the below code snippet
<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"
>
//lists property returns all lists from the SharePoint site
//Use the filter method to get only visible Lists by using the property "Hidden"
//then( ) runs on success
//catch( ) runs on failure
$pnp.sp.web.lists.filter(
'Hidden eq false'
).get().then(
function
(result) {
var
listsInfo =
""
;
for
(
var
i = 0; i < result.length; i++) {
listsInfo +=
"Title: "
+ result[i].Title +
"<br/>"
;
}
document.getElementById(
"sample"
).innerHTML = listsInfo;
}).
catch
(
function
(err) {
alert(err);
});
</script>
- Add the URL of sample.html file to the content editor web part
- Click OK to apply the changes to the web part and save the page.
- Now the page displays a all the visible lists & libraries from the SharePoint website using PnP JavaScript method .
Note: Supports SharePoint 2013, SharePoint 2016 and SharePoint Online. For on-premise environment, PnP requests will not work properly due to JSON Light is not enabled by default. To enable , we have to modify the headers before calling PnP methods. Check this link https://blogs.msdn.microsoft.com/patrickrodgers/2016/06/13/pnp-jscore-1-0-1/ for setup the headers.
[code language=”javascript”]
//Set response type in headers
$pnp.setup({
headers: {
"Accept": "application/json; odata=verbose"
}
});
[/code]
Output:
