How to access properties that I have created dynamically?

Question

In the thinking of rebuilding Highlighted content properties, I have created button that add fields in the property pane but now I would like to know how to store the value of these fields and how to access these values.

I have created an array in wich one I push PropertyPaneDropdown when I click "AddButton". Each PropertyPaneDropDown have its own property because I use variable that I increment. My problem is that these property doesn't exist in the webartProps Interface.

private buttonAdd(tab, tabID): any {  
let nameID;
if(tab == this.dynamicTypes){
  nameID = "DT";
}
let ind = tab.length;
if(ind == 1){
  tab.push(PropertyPaneButton('deleteButton'+nameID+"0", {
    text: 'Delete',
    buttonType: PropertyPaneButtonType.Hero,
    icon: 'Delete',
    onClick: this.buttonDelete.bind(this,nameID+"0")
  }));
}
tab.push(PropertyPaneDropdown(nameID+(tabID++), {
  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: 'Documents'
}),
PropertyPaneButton('deleteButton'+nameID+(tabID-1), {
  text: 'Delete',
  buttonType: PropertyPaneButtonType.Hero,
  icon: 'Delete',
  onClick: this.buttonDelete.bind(this,nameID+(tabID-1), tab)
})
);
console.log(tab);
this.context.propertyPane.refresh();

}

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

let dynamicProps: any;


let source :any;

if(this.properties.typeOfContent){
  source = PropertyPaneDropdown('source', {
    label: 'Source',
    options: [
      { key: 'This site', text: 'This site'},
      { key: 'A document library on this site', text: 'A document library on this site'},
      { key: 'This site collection', text: 'This site collection'},
      { key: 'Select sites', text: 'Select sites'},
      { key: 'All sites', text: 'All sites'}
    ],
    selectedKey: 'This site'
  });

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

  let addDocumentButton = PropertyPaneButton('addButton',{
    text: 'Add document type',
    buttonType: PropertyPaneButtonType.Hero,
    icon: 'Add',
    onClick: this.buttonAdd.bind(this, this.dynamicDocuments, this.dynamicDocumentID)
  })

  switch(this.properties.source){
    case "This site":
      dynamicProps = this.dynamicTypes.concat(addTypeButton);
      break;
    case "A document library on this site":
      dynamicProps = PropertyPaneDropdown('documentLibrary', {
        label: 'Document library',
        options: [
          { key: 'Documents', text: 'Documents'},
          { key: 'Documents Publics', text: 'Documents Publics'},
          { key: 'From Templates', text: 'From Templates'},
          { key: 'Reporting Templates', text: 'Reporting Templates'},
          { key: 'Search Config List', text: 'Search Config List'},
          { key: 'Site Assets', text: 'Site Assets'},
          { key: 'Site Collection Documents', text: 'Site Collection Documents'},
          { key: 'Style Library', text: 'Style Library'},
        ],
        selectedKey: 'Documents'
      });
      dynamicProps = dynamicProps.concat(this.dynamicDocuments).concat(addTypeButton);
      break;
    case "This site collection":
      dynamicProps = this.dynamicTypes.concat(addTypeButton);
      break;
    case "Select sites":
      dynamicProps = this.dynamicTypes.concat(addTypeButton);
      break;
    case "All sites":
      dynamicProps = this.dynamicTypes.concat(addTypeButton);
      break;
  }
}
else{
  source  = PropertyPaneLabel('emptyLabel', {
    text: ""
  });
  dynamicProps = []
}




return {
  pages: [
    {
      header: {
        description: "Parameters"
      },
      displayGroupsAsAccordion: true,
      groups: [
        {
          groupName: "Content",
          groupFields:[
            PropertyPaneToggle('typeOfContent', {
              label: 'Type of Content',
              onText: 'SharePoint Lists',
              offText: 'Raw Images'
            }),
            source
          ].concat(dynamicProps)
        },
        {
          groupName: "Filters",
          groupFields:[

          ]
        }
      ]
    }
  ]
};

Here some of my code to show you how I though it. I'm kind of stuck on that so it would be so helpfull to have some help. Best regards

Answer 1

Normally, every PropertyPane contructor takes as first parameter the variable it will use to store the data.

So your this.properties object should contain any of the variables you declared. I'm not sure if you actually said and tested this object ?