Usage Guide on SPFx PnPJS Tester Web part

This article is to provide guidance on usage of PnPjs Tester web part which I have co-developed with Kunj Sangani and contributed to PnP SPFx Webpart gallery.

Direct Package Download link – https://github.com/siddharth-vaghasia/public-docs/blob/master/react-pnpjsexplorer.sppkg

First, let us understand about this web part and why this can be useful to SPFx developer

About Web part

This web part will allow SPFx developers to test PnPjs methods and it displays response in JSON viewer to identify properties/attributes returned by method/api. This webpart can be used as seperate component to test PnP Js methods and know the response returned by a particular method/api. To maximise productivity, we should package and deploy it to a test(developer) site collection which then can be used side by side when we are doing development of SPFx solutions. 

The idea behind this web part

• Most of the SharePoint developers are using PnP JS to develop SPFx solutions.
• During the development, there are times when we wanted to know what properties/attributes will be returned in response
• To get these details, we either use console.log to log response or debug the javascript and check what properties/attributes are returned etc.
• This web part can be used so that we can quickly test any SharePoint rest api methods using PnP JS.

Notes On Web part

• WebPart to test PnP JS SharePoint package methods
• The response will be displayed in a code format.
• By default, it will run in the context of the current site collection.
• Optional option to enter diffrent site collection or sub site url to set PnP JS context to diffrent url(other than current context)
• Support for Get and Post methods.
• Option to see some examples which can be copied and tested just by changing list/libraries/column names.

Let us see how to use this web part and how it can be used to test PnP Methods.

It is assumed either you have cloned the web part code and testing web part in SharePoint workbench or have deployed the sppkg file to the app catalog and installed and added web part to any SharePoint Page.

Below is how the web part will look once it loads page. Below screenshot also explain what different options in web part will do.

Click on Samples will open below side panel

Options available and its usage.

Now let us test some PnPJs methods and see its output.

Note - This article contains only a few examples to demonstrate the usage of PnP Js methods in the web part. But this will support to test every Sharepoint PnP Js method as listed in 

https://pnp.github.io/pnpjs/sp/

Method to get Web Properties

Below is PnPjs method to get Web properties in below case ‘Title’, you can test get any other properties values by passing in parameter.

sp.web.select('Title')

Enter in text box and click on Run Query, it should show you below output.

Examples Methods to get List Items from List

Below is PnPJs method to get list items from a List

sp.web.lists.getByTitle('Activities').items

You should see below output.

If you look at output, this will tell you which all properties are returned by method which can help you write your actual code.

Next example is to query top 2 items from list but with selected properties and by specifying order by.

sp.web.lists.getByTitle('Activities').items.select('Title','Description').top(2).orderBy('Modified', true)

Get root folder inside a document library

sp.web.lists.getByTitle('Documents').rootFolder.folders()

 

You can try our different other methods and please comment below if you find any issues or need more information.