Display multiple Dynamic IPropertyPanePage.groups Sharepoint Online Framework

Question

Hi everyone I'm creating a Web Part in order to display a full width Bootstrap grid with you can personalize Sharepoint pages. Selecting the Grid Size options the Grid is created and everything works fine. But I need also to display the properties from a single cell in order to customize all the Grid Cells. I tried everything but i Can only display one object. If im right the IPropertyPanePage.groups is an array of Objects but I just can show one object at the time. I know that this could be easy for some of you but I really need a help. I'm using React framework to build the webpart.

    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups:[
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneDropdown('GridSize', {
                  label: 'Please Select the Size of the Grid',
                  disabled: false,
                  options: this.gridOptions
                })
              ]
            }
          ]
        },
        {
          //Page 2
          displayGroupsAsAccordion: true,
          header: {
            description: 'Cells Properties'
          },
          groups: [          
              this.getCellProps()  
          ]
        }
      ]
    };
  }
}

function code below

  private getCellProps() {

    var totalcells = 1 * 4;
    console.log('total=' + totalcells);

    if (totalcells != 0) {

      var listPanels =[];

      for (var x = 1; x <= totalcells; x++) {
      //console.log(x);

        var singlePanel = {
          groupName: "Panel"+x,
          isCollapsed: true,
          groupFields: [
            PropertyPaneHorizontalRule(),
            PropertyPaneTextField('Title', {
              label: 'Title Panel',
              placeholder: 'Insert Title',
            }),
            PropertyPaneTextField('ImgPath', {
              label: 'Image Path',
              placeholder: 'Insert Path Image URL',
            }),
            PropertyPaneTextField('Link', {
              label: 'Link Image',
              placeholder: 'Insert Link',
            }),
            PropertyPaneDropdown('WidthValue', {
              label: 'Width Value',
              disabled: false,
              options: this.widthOption
            }),
            PropertyFieldToggleWithCallout('toggleInfo', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'toggleInfo',
              label: 'Disable Link Pane',
              calloutContent: React.createElement('p', {}, 'With this control you can enable or disable the link for this cell'),
              onText: 'Disabled',
              offText: 'Enabled',
              checked: this.properties.toggleInfo
            }),
            PropertyFieldToggleWithCallout('IsHidden', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'IsHidden',
              label: 'Hidden/Show Panel',
              calloutContent: React.createElement('p', {}, 'With this control you can Hidden or Show the cell'),
              onText: 'Hidden',
              offText: 'Show',
              checked: this.properties.IsHidden
            }),
            PropertyFieldToggleWithCallout('IsCircle', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'IsCircle',
              label: 'Square/Circle Image',
              calloutContent: React.createElement('p', {}, 'With this control you can Modify the shape of the image'),
              onText: 'Circle',
              offText: 'Square',
              checked: this.properties.IsCircle
            }),
            PropertyFieldToggleWithCallout('NoTitle', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'NoTitle',
              label: 'Enable/Disable Title',
              calloutContent: React.createElement('p', {}, 'With this control you can enable or disable the Title '),
              onText: 'Disabled',
              offText: 'Enabled',
              checked: this.properties.NoTitle
            })
          ]
        };
        listPanels.push(singlePanel);
        console.log(listPanels.length);
      }
      return listPanels[3];
    }
  }

Answer 1

This looks like it'll be a cool sample.

You weren't far from getting something that works. If I can give you a little trick: take advantage of Typescript and define what each variable type will be. That way, it'll help identify issues quickly in your code.

For example, your getCellProps method returns (or should return) an array of IPropertyPaneGroup, so declare your function so that Typescript will scream at you if you don't return the right type of value, as follows:

private getCellProps(): IPropertyPaneGroup[] {

With that in mind, I have changed your code so that you return an array of IPropertyPaneGroup as follows:

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups:[
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneDropdown('GridSize', {
                  label: 'Please Select the Size of the Grid',
                  disabled: false,
                  options: [{key: 'Big', text: 'Big'},{key: 'Small', text: 'Small'}]
                })
              ]
            }
          ]
        },
        {
          //Page 2
          displayGroupsAsAccordion: true,
          header: {
            description: 'Cells Properties'
          },
          groups: this.getCellProps()
        }
      ]
    };
  }

  private getCellProps(): IPropertyPaneGroup[] {

    const totalcells: number = 1 * 4;
    console.log('total=' + totalcells);

    if (totalcells != 0) {

      const listPanels: IPropertyPaneGroup[] =[];

      for (var x = 1; x <= totalcells; x++) {

        var singlePanel: IPropertyPaneGroup = {
          groupName: "Panel"+x,
          isCollapsed: true,
          groupFields: [
            PropertyPaneHorizontalRule(),
            PropertyPaneTextField('Title', {
              label: 'Title Panel',
              placeholder: 'Insert Title',
            }),
            PropertyPaneTextField('ImgPath', {
              label: 'Image Path',
              placeholder: 'Insert Path Image URL',
            }),
            PropertyPaneTextField('Link', {
              label: 'Link Image',
              placeholder: 'Insert Link',
            }),
            PropertyPaneDropdown('WidthValue', {
              label: 'Width Value',
              disabled: false,
              options: [{key: 'One', text: 'One'}, {key: 'Two', text: 'Two'}, {key: 'Three', text: 'Three'}]
            }),
            PropertyFieldToggleWithCallout('toggleInfo', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'toggleInfo',
              label: 'Disable Link Pane',
              calloutContent: React.createElement('p', {}, 'With this control you can enable or disable the link for this cell'),
              onText: 'Disabled',
              offText: 'Enabled',
              checked: this.properties.toggleInfo
            }),
            PropertyFieldToggleWithCallout('IsHidden', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'IsHidden',
              label: 'Hidden/Show Panel',
              calloutContent: React.createElement('p', {}, 'With this control you can Hidden or Show the cell'),
              onText: 'Hidden',
              offText: 'Show',
              checked: this.properties.IsHidden
            }),
            PropertyFieldToggleWithCallout('IsCircle', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'IsCircle',
              label: 'Square/Circle Image',
              calloutContent: React.createElement('p', {}, 'With this control you can Modify the shape of the image'),
              onText: 'Circle',
              offText: 'Square',
              checked: this.properties.IsCircle
            }),
            PropertyFieldToggleWithCallout('NoTitle', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'NoTitle',
              label: 'Enable/Disable Title',
              calloutContent: React.createElement('p', {}, 'With this control you can enable or disable the Title '),
              onText: 'Disabled',
              offText: 'Enabled',
              checked: this.properties.NoTitle
            })
          ]
        };
        listPanels.push(singlePanel);
        console.log(listPanels.length);
      }
      return listPanels;
    }
  }
}

It gives you the results that you want (I think). Sorry if I hard-coded some dummy choices in my code sample, I didn't know what your options were.

I hope this helps?