How can I use a Property Pane Button to dynamically add or delete fields in the property pane?

Question

I'm currently working on my own webpart and I'm looking for a way to dynamically add or delete fields in the property pane exactly as it is in the highlighted content webpart. I don't even know how to really start. I tried using a variable in which one I add some content and re render the web part after but it didn't really work.

Best regards

Answer 1

If you wish to be able to alter the number or the type of fields displayed in the WebPart Property Pane, you need to change the code in the <webpart-name>WebPart.ts file in the protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration method. Instead of returning a static JS Object, you can put whatever logic you want to return a different object.

Don't hesitate to give code snippets if you need a more precise answer.

Hope this helps!

Answer 2

I tried to adapte the property pane code because I saw that buttons call render method when they are clicked.

I started like this :

let dropDownProperty : any;
switch(this.properties.source){
  case 'This site':
    for(var i =0; i<numberTypeOfContent;i++){
          dropDownProperty = dropDownProperty,
          PropertyPaneDropdown('type', {
            label: 'Type',
            options: [
              { key: 'Documents', text: 'Documents'},
              { key: 'Pages', text: 'Pages'},
              { key: 'News', text: 'News'},
              { key: 'Videos', text: 'Videos'},
              { key: 'Images', text: 'Images'},
              { key: 'Events', text: 'Events'},
              { key: 'Issues', text: 'Issues'},
              { key: 'Tasks', text: 'Tasks'},
              { key: 'Links', text: 'Links'},
              { key: 'Contacts', text: 'Contacts'},
              { key: 'All', text: 'All'}
            ],
            selectedKey: 'This site'
          })
    }
    break;

The button that I add a new dropdown look like this :

let addTypeButton = PropertyPaneButton('numberTypeOfContent',{
  text: 'Add content type',
  buttonType: PropertyPaneButtonType.Hero,
  icon: 'Add',
  onClick: this.buttonAdd.bind(this)
});

And its method:

private buttonAdd(): any { 
numberTypeOfContent++;

}

Thanks in advance for your help