How to use the context of another site while using PnP in SharePoint Framework (SPFx) web part?

Introduction:

When we use PnP to work with SharePoint lists, PnP will use the context of the current site. We cannot use the context of another site.

In this blog, we will learn how can we get the context of another site.

Steps:

Step 1: First, we need to install npm package for sp-pnp-js. Execute below command to install it:

 npm I sp-pnp-js  

Step 2: Once it is installed, import the web from sp-pnp-js as below:

 import { Web } from "sp-pnp-js";  

Step 3: Now, we will get the web context of particular site collection as below:

• var siteUrl = "https://***********.sharepoint.com/sites/*******";
• let web: any = new Web(siteUrl);

Step 4: Now, you can use this web context to work with SharePoint lists as below:

• var tickers = await web.lists.getByTitle("List Name").items.select("Title”).get();

Now, in a tickers variable, you will be able to fetch the list items from another site collection.

Conclusion:

This is how we can use the context of another site in the SPFx web part. Hope this helps!

If you have any questions you can reach out our SharePoint Consulting team here.