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

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

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.

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.