SPFx - How to fetch list items from another site collection?

Primal Lobo

How to dynamically fetch list items from different site collection.

ex:I am deploying solution in /sites/sales and i want to pull list items from sites/makerting.

I want to use "Site Url" text box in property pane and based on the URL provided here , I want to fetch all the lists from that site under another property pane dropdown "SharePoint Lists".

Thanks in advance :)

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vaibhav Chauhan5y ago
Accepted answer
Here is the Cascading dropdown tutorial with property pane but in your case you can use you site url text box and change the dronpdown based events to textbox based events.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/use-cascading-dropdowns-in-web-part-properties

The selected site url and listname from dropdown can be pass into your SPFx react component as props value and used to fetch the related data using REST API/ Pnp.
Primal Lobo5y ago
I want to fetch dynamically from property pane configuration. Can you help on this approach
Rijwan Ansari5y ago
HI
You can do
private web = Web("https://testinglala.sharepoint.com/sites/marketing/");
define web with destination site collection then
public componentDidMount = () => {
    this.web.lists.getByTitle("Employee").items().then((items) => {
        this.setState({
            listItems: items
        });
    }).catch((err) => {
        console.log(err);
    });
}
Satya Karki5y ago
Hi,

check this
https://www.c-sharpcorner.com/article/use-pnp-js-to-fetch-list-items-from-other-site-collection-in-sharepoint-online/