Filtering SharePoint Collection Objects Using PnP JavaScript Library

Introduction

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

PnP-JS-Core Library

SharePoint has a lot of building blocks in the collections, which are used to form SharePoint sites. These are used to manage the contents, and generate the reports based on contents and settings, etc. For managing or reporting the contents, we have to insert sorting or filtering functionality to the collections.

Based on 1.0.1 version of PnP-JS-Core library, following are the collections, available for the developers to be used in SharePoint add-ins or the Applications shown below: 

contenttypes fields Files folders
items lists navigation sitegroups
siteusers usercustomactions userprofiles Views
webs    

Syntax

PnP-JS-Core Component is built, using the REST API, so the same syntax for filtering and sorting can be used in these library extensions.

To apply the filter in REST API, we can use the below format to filter the items from the collection,

http://sharepointsite.com/_api/web/lists?$filter=<PropertyName condition PropertyValue>

REST API code, given below is an endpoint example to get the content type enabled lists,

http://sharepointsite.com/_api/web/lists?$filter=AllowContentTypes eq true

The same way, we can use the same syntax to apply filters in the PnP JS Core library, because it is developed on top of REST API.

Examples

Given below are some examples of PnP-JS-Core snippets to filter the objects, based on each property from the collection.

  1. To filter the content type enabled lists, the code is shown below:
    1. //Show the content type enabled lists  
    2. $pnp.sp.web.lists.filter('AllowContentTypes eq true').get().then(function(result)  
    3. {  
    4.     //Add your code to display the collection results  
    5. });  
  2. To filter the documents libraries from the lists, the code is shown below:
    1. //Show the document libraries  
    2. $pnp.sp.web.lists.filter('BaseTemplate eq true').get().then(function(result)   
    3. {  
    4.     //Add your code to display the collection results  
    5. });  
  3. To filter the blog sites from the sub sites, the code is shown below:
    1. //Show the blog sites from the collection of subsites  
    2. $pnp.sp.web.webs.filter("WebTemplate eq 'BLOG'").get().then(function(result)  
    3. {  
    4.     //Add your code to display the collection results  
    5. });  

Note To replace, the following line needs to be used to display the results.

  1. //Add your code to display results with the below code to display the object title  
  2. for (var i = 0; i < result.length; i++)  
  3. {  
  4.     console.log(result[i].Title);  
  5. }  
Conclusion

This PnP JS library simplifies the code implementation and reduces the developer effort too. This article is also available here.