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

2 Answers 2


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!

  • I literally want to recreate the "Content" and "Filter and Sort" groups of the "Highlighted content" out od the box webpart. By dynamically adding or deleting I mean exactly as add buttons or bin buttons in this webpart. Commented May 22, 2018 at 14:16

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;
  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'

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 { 


Thanks in advance for your help

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.