Customizing SharePoint Framework Web Part Properties - Part Five


In this article, you will learn how to add the dropdown field, bind the values dynamically to SharePoint Framework Web part properties pane, and load the Web part based on the dropdown value selected. In my previous articles, I have introduced the custom properties, explained check box field properties samples and managing multiple pages on the properties pane of SharePoint Framework (SPFx) Web part.

In my SPFx article series, you can learn about SPFx introduction, prerequisites, steps for setting up the environment, and developing and testing the Web parts, using the local environments.

In my previous article, you will have seen how to add a dropdown field to the Web part property pane.

In this article, you will see how to bind the values dynamically to the dropdown field of the Web part properties and load the Web part when a dropdown is selected with the code samples. 

Drop down Property Declaration/Definition

The values appended to the dropdown field are of type IPropertyPaneDropdownOption. The variable "dropDownOptions" of the same type is declared inside the class.

  1. private dropDownOptions: IPropertyPaneDropdownOption[] =[];  

The properties are defined, using propertyPaneSettings method. The snippet given below shows the defined properties. As you can see, the values are not appended directly to the options, rather variable "dropDownOptions" of type IPropertyPaneDropdownOption is assigned.

  1. protected get propertyPaneSettings(): IPropertyPaneSettings {  

  2. return {      

  3. pages: [        {          

  4. header: {            

  5. description: strings.PropertyPaneDescription,          

  6. },          

  7. groups: [            {              

  8. groupName:"Lists",              

  9. groupFields:[                

  10. PropertyPaneDropdown('DropDownProp',{                  

  11. label: "Select Lis