SPFx Property Pane Configuration Options

Introduction

In this article, let us see the options available for the configuration of SharePoint Webpart Properties Pane.

The sample explained here is in continuation of my previous post. In my previous post, I have explained how to render the SPFx web part properties pane based on list data asynchronously. 

• Render SPFx Properties Pane Based On List Data 

IPropertyPaneConfiguration Interface

 

The SPFx web part properties pane implements the IPropertyPaneConfiguration interface available. So in the web part file code, by default getPropertyPaneConfiguration extends the IPropertyPaneConfiguration interface. This can be seen in my previous post as well. So far I have shown only the property configuration method returning the pages property.

The IPropertyPaneConfiguration interface contains the following properties. 

• pages – pages denotes collection of pages (implements IPropertyPanePage[]). Each and every page in the IPropertyPanePage array contains the header and groups properties. The header is used for denoting the page name, and the groups will contain the collection of properties used in the properties pane.
• currentPage – Current Page denotes the page number to be shown when the pane property is opened. (This seems to be not working as expected).
• loadingIndicatorDelayTime – Loading indicator delay time denotes the number of milliseconds for delaying the loading indicator on the property pane before rendering.
• showLoadingIndicator – It is a Boolean property used to decide whether the loading indicator is shown or not. 

Sample 

Let us try adding these properties in our sample here.

The below web part file contains the web part configuration method, which has three pages. The first page contains the dynamic properties to be loaded (explained in my previous article). The other two pages contain the groups with no properties.

Loading indicator is shown when the property pane loads. It is turned off, when the properties in the pane are loaded with data. This is very useful for loading the data using asynchronous calls. loadingIndicatorDelayTime property is used to decide delay time for showing the loading indicators. By default, delay time for loading indicator is 500 milliseconds. In the sample, I have given only 5 milliseconds. 

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: "SPFx Properties Page 1"
        },
        groups: [
          {
            groupName: "Dynamic Properties - Page 1",
            groupFields:
              this.dynamicProps
          }
        ]
      },
      {
        header: {
          description: "SPFx Properties Page 2"
        },
        groups: [
          {
            groupName: "Dynamic Properties - Page 2",
            groupFields:
              []
          }
        ]
      },
      {
        header: {
          description: "SPFx Properties Page 3"
        },
        groups: [
          {
            groupName: "Dynamic Properties - Page 3",
            groupFields:
              []
          }
        ]
      }
    ],
    //currentPage: 3,
    loadingIndicatorDelayTime: 5,
    showLoadingIndicator: this.loadIndicator
  };
}
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.loadIndicator= false;
                    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 below snapshot shows the properties pane with loading image.

 

Summary

 

Thus, you have seen the SharePoint Framework Properties Pane methods and the properties with loading indicator.