Get Available Web Parts From Site Collection Using PnP Javascript

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,

In this post, we will see how to get the available web parts from SharePoint "Web Part Gallery" using PnP-JS-Core library,

Example

The following code snippet used to get the webpart's name from web part gallery in a Site Collection using PnP JavaScript library, click here to read more.

  1. <!-- Required Scripts -->  
  2. <script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>   
  3. <script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>   
  4. <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>   
  5.    
  6. <div id="sample"></div>  
  7.     
  8. <script type="text/javascript">  
  9. //To get individual property of an SharePoint object use select(<propertyname>) before get() method 
  10.    
  11. $pnp.sp.web.lists.getByTitle("Web Part Gallery").items.select('FileLeafRef').get().then(function(result) {  
  12. var webParts = "Total available Web Parts: " + result.length+"<br/>";  
  13. for (var i = 0; i < result.length; i++) {  
  14. webParts += result[i].FileLeafRef + "<br/>";  
  15. }  
  16. document.getElementById("sample").innerHTML = webParts;  
  17. //console.log(webParts);  
  18. }).catch(function(err) {  
  19.  alert(err);  
  20. });
  21.   
  22. </script>