React SPFX - populate Property Pane Drop down with ID's from SharePoint list

Question

I am new to spfx and struggling with a simple task...!!

I have a property pane drop down selecting a SharePoint list which works, now I would like a drop down that is dynamically populated with the SharePoint ID's from the selected list, unfortunately I just can't seem to achieve it.

Can someone please guide me in the right way?

Answer 1

On selection of List title from the populated dropdown you need to make call to SharePoint to get the Item IDs. Now to handle the List selection event on the first dropdown you can use onPropertyPaneFieldChanged(propertyPath, oldValue, newValue) method from the BaseWebPart Class

Reference Microsoft Docs: onPropertyPaneFieldChanged

The implementation of onPropertyPaneFieldChanged will look like this

     protected   onPropertyPaneFieldChanged (propertyPath :string,oldValue:any,newValue:any ):void {
     if (propertyPath == `selectedList`) { // property pane list dropdown name
     //code to get the list items Id using the rest call
     //bind the items with second dropdown
     this .context.propertyPane.refresh (); //this is required }}

You can also refer: https://www.sharepointwidgets.com/2018/05/sharepoint-framework-spfx-cascade.html for similar implementation(List views are loaded dynamically based on the list selected)

OR

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