Отображение нескольких Dynami c IPropertyPanePage.groups Sharepoint Online Framework

Question

Привет всем. Я создаю веб-часть для отображения полной ширины Bootstrap сетки, с помощью которой вы можете персонализировать страницы Sharepoint. При выборе параметров размера сетки создается сетка, и все работает нормально. Но мне нужно также отобразить свойства из одной ячейки, чтобы настроить все ячейки сетки. Я пробовал все, но я могу отображать только один объект. Если я прав, IPropertyPanePage.groups - это массив объектов, но я могу показать только один объект за раз. Я знаю, что это может быть легко для некоторых из вас, но мне действительно нужна помощь. Я использую React Framework для создания веб-части.

    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()  
          ]
        }
      ]
    };
  }
} 

код функции ниже

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