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,

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

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.

<!-- Required Scripts -->
<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
<script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>

<div id="sample"></div>

<script type="text/javascript">
//To get individual property of an SharePoint object use select(<propertyname>) before get() method

$pnp.sp.web.lists.getByTitle("Web Part Gallery").items.select('FileLeafRef').get().then(function(result) {
var webParts = "Total available Web Parts: " + result.length+"<br/>";
for (var i = 0; i < result.length; i++) {
webParts += result[i].FileLeafRef + "<br/>";
}
document.getElementById("sample").innerHTML = webParts;
//console.log(webParts);
}).catch(function(err) {
 alert(err);
});

</script>