Working With Cascading Dropdowns In SPFx Webpart Properties

In this post, you will learn how to populate cascading drop down options in SharePoint Framework web part properties pane. You will see how to populate cascading dropdown fields with dynamic SharePoint list content. I have used two dropdowns in this sample.

Declare Drop down Fields/Properties

The drop down values appended to the field is of type IPropertyPaneDropdownOption. The variables "listDropDownOptions" and "itemDropDownOptions" of same type are declared inside the class.The below snippet shows the property declaration.

private listDropDownOptions: IPropertyPaneDropdownOption[] =[];  

private itemDropDownOptions: IPropertyPaneDropdownOption[] = [];  

Define Properties

The properties are defined using propertyPaneSettings() method. The below snippet shows the properties defined.

protected get propertyPaneSettings(): IPropertyPaneSettings