2

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

enter image description here

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?

1 Answer 1

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,
              ]
            }
        }]
    }
}
2
  • That does seem to work...however...how will i add more than 1 dynamic property? If i turn myArray into an actual array (by adding myArray = [] and then pushing PropertyPaneTextField) i'm going to get a "cannot read property type of undefined" if i do a foreach & i apparently cant do a for loop inside that field.
    – Dante R.
    Oct 3, 2018 at 8:18
  • Ok so i've updated my question with some real code. The problem i'm having atm is that even tho the item gets pushed to the array...it doesnt display. Display myArray as you did above will result in an error (because it is after all an array of object). I can't do a for loop inside the GroupFields prop, how can i display all my fields (that are in the array) ?
    – Dante R.
    Oct 3, 2018 at 8:56

Your Answer

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

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