1

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];
    }
  }
3

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?

1
  • THANK YOU SO MUCH! I even tried returning a IProperty PanelGroup but when I returned it without the new const that you inserted I had an error like "GroupName was missing". Now Everything Works fine thanks to you. I was really frustrated. If someone need i was following this example: link Apr 6 '20 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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