How i can automatically populate my SPFx web part's property field with all choices from a choice field

Question

I have a SPFx web part with one property named Department:-

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('department', {
                  label: 'Department'
                })
              ]
            }
          ]
        }
      ]
    };
  }

and it is a free text. so how i can make this property field Drop-down and populate its choices from a field named Department inside a list named Contacts?

Thanks

Answer 1

Apparently you can do it by loading the data from the list in the OnInit() function, and then reference it in the property pane. OnInit() can block the loading of the web part, so you can be sure to have the data loaded and the options set before users see a blank drop-down.

Here's a related question and answer on this site.

Here's another related question and answer on this site.

Here's a separate blog article about how to do it.

Answer 2

The easiest path is to use a third party controls library such as sp-dev-fx-property-controls. They are built to work with SharePoint fields.

I have also published a method called the Property Pane Portal that would work but is more complex to set up. I don't have a specific example for choice columns, but you could reuse the third party SPFx controls. Feel free to explore my blog posts and Github samples.

With that said, the other answer from Wictor's blog should work too.