Add Dynamic Property Panes to SPFX

Question

I know this has been asked 1000 times, but i've tried everything in the first 2 pages of google so i've decided to come to you guys for help.

I'm trying to create some dynamically added property panes. I'll have a column (on my sharepoint webpart) with a few tiles. I want to add different options for those tiles and i want to add the ability to add a tile with a button in the property pane. I've tried with arrays and such, but thats not the point.

I'm working on SPFX 1.6.0 with React (15.6 i think its the latest for spfx)

The point is i am unable to add a propertypane dynamically. I checked out this code -> https://www.c-sharpcorner.com/article/render-spfx-properties-pane-based-on-list-data/

And came up with a little test:

let myArray : any;
myArray.push(PropertyPaneTextField(someID.toString(), {  
                label: someLabel
              }))

And then in my

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

I added something like this ->

    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
              {.....BUTTON HERE....},
              this.properties.myArray
              ]
            }
          ]
        }
      ]
    };

Once again, this is not the actual code!

The error that comes up in my console is something like "can't get 'type' of undefined'. But i am console logging the array and some objects do exist in it...

I'll update my question tomorrow with the actual code from my webpart, but it was so damn frustrating that i had to ask.

Thanks in advance.

EDIT: Adding the actual code below ->

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

const displayApps = () => {
  var self = this;
  if (this.properties.itemArray === undefined) {
    this.properties.itemArray = [];
  }
  if (this.properties.itemArray.length > 0) {
    for (let x = 0; x < this.properties.itemArray.length; x++) {
      return this.properties.itemArray[x];
    }
  }
  else {
    return (this.properties.itemArray.push(PropertyPaneTextField('0', {
      label: "First App"
    }))
    );
  }
  self.context.propertyPane.refresh();
};

And for displaying i'm trying ->

          groupFields: [
            PropertyPaneHorizontalRule(),
            PropertyFieldButtonWithCallout('addAppsButton', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'buttonWithCalloutFieldId',
              calloutContent: React.createElement('p', {}, 'Tests connection to the database with the parameters listed above'),
              calloutWidth: 150,
              text: 'Add App',
              onClick: () => { addApps(); }
            }),
            displayApps()

If i add the array directly it won't be able to display all PropertyPanes that are saved in it (sine it will be an array of object i assume it needs a foreach or a for loop).

EDIT2: Ok so i've got rid of the "undefined" problem. This is my array ->

My webpart has no errors, but no PropertyPaneTextField is displayed either. I even tried an onclick function to refresh the pane by using this.context.propertyPane.refresh();

If i use the array with a target ex: myArray[0] i do see a field. How were other people able to simply drop the array of object inside groupFields and have it render all of them? Every example that i've looked at does that. They create an array by using :any and array.push and then add it to groupFields.

I am on SPFX 1.6.0. Is there a different way to do t now or what am i missing?

Answer 1

If you want to add it dynamically, you can try that in the getPropertyPaneConfiguration() as below:

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    let myArray: any;
    myArray = PropertyPaneTextField('someTextField', {
        label: "someLabel",
        ariaLabel: "someLabel",
      });

    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupFields: [
                {.....BUTTON HERE....},
                myArray,
              ]
            }
        }]
    }
}