0

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?

enter image description here

Thanks

2 Answers 2

2

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.

6
  • are you able to provide an example ?
    – John John
    Commented Nov 30, 2021 at 21:06
  • 1
    No, I have never done it before myself. But there are code examples in the other answers and the blog article linked to. Commented Nov 30, 2021 at 21:28
  • i checked them but they are not the same as my requirement .. also i tried this approach wictorwilen.se/blog/… but the whole web part did not load
    – John John
    Commented Nov 30, 2021 at 21:40
  • 1
    It is the same as your requirement: on load, dynamically query SharePoint to get information to use to then create choices in a drop-down in the property pane. Just because the information being retrieved in the example is the names of the lists on the site and what you want is the available choices for a choice field on a specific list does not make a difference. The technique should be the same. Just what you are actually querying SharePoint for will be different. Commented Nov 30, 2021 at 23:09
  • the methods used in these links are using obsolete code for now,, i just tried them
    – John John
    Commented Nov 30, 2021 at 23:12
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.