Render SPFx Properties Pane Based On List Data

 Introduction

In this article, let us see how to render the SharePoint framework web part properties pane dynamically using SharePoint list data.

Here in the sample, I am using the solution created for my previous sample. It was created with react JS framework.

Property Configuration 

All types of SPFx solutions contain the main web part TypeScript file (.ts). It contains the class with render method and property configuration method (getPropertyPaneConfiguration).

The property configuration method contains the default return statement. It returns the configuration which has pages to be rendered on the property pane along with the groups and the respective properties on the groups. The following is the default code. It contains

• One page configuration with the page header
• One group with group name and a text property

 protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
              PropertyPaneTextField('description', {
                label: strings.DescriptionFieldLabel
              })
            ]
          }
        ]
      }
    ]
  };
}

Here, in this sample, let us look at dynamically adding the list items in the properties pane of SharePoint Framework web part. Let us consider adding the check boxes to the properties pane.

Property pane configuration start method

The data to be pulled can be retrieved using the onPropertyPaneConfigurationStart method. The data from the list will not be available for rendering in the property configuration method, even though start method triggers before the configuration method. This is because the data to be retrieved from the list works asynchronously. The properties pane should be refreshed using the this.context.propertyPane.refresh() method in the code, which again triggers the properties configuration method. The property pane re-renders once the refresh method was called.

So, the property pane configuration start method will contain the code to retrieve the list items and dynamically build the check box properties and push it to the global array. The global array is then assigned to the group fields property in the property pane configuration method.

The configuration start method is shown below.

protected onPropertyPaneConfigurationStart(): void {
  var self = this;
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == XMLHttpRequest.DONE) {
              if (xmlhttp.status == 200) {
                  var data = JSON.parse(xmlhttp.responseText);
                  if (data != null) {
                    self.dynamicProps = [];
                      data.d.results.forEach(function(item){
                      //self.dynamicProps.push({key: item.ID, text: item.Title});
                      self.dynamicProps.push(
                      PropertyPaneCheckbox(item.ID,
                        {
                          text:item.Title
                        })
                      );
                    });
                    self.context.propertyPane.refresh();

                  }
              } else if (xmlhttp.status == 400) {
                  console.log('There was an error 400');

              } else {
                  console.log('something else other than 200 was returned');
              }

          }
      };

      var inputUrl = "https://nakkeerann.sharepoint.com/sites/spfx/_api/web/lists/getByTitle('TestList')/items";
      xmlhttp.open("GET", inputUrl, true);
      xmlhttp.setRequestHeader("Accept","application/json; odata=verbose");
      xmlhttp.send();
}

The property pane configuration method contains the return statement with pane pages and groups with properties. The configuration method is shown below.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: "SPFx Properties"
        },
        groups: [
          {
            groupName: "Dynamic Properties",
            groupFields:
              this.dynamicProps

          }
        ]
      }
    ]
  };
}

The below snapshot shows the SPFx web part with the dynamically added pane properties.