Dynamic property pane fields in SPFx

SharePoint Framework allows you to build powerful SharePoint web parts that leverage from a suite of Microsoft products on a modern JavaScript based tech stack. Through the property pane, the flexibility of your solutions can be extended to meet the requirements and use cases of your audience.

While the available property pane fields already provide you with a good number of ways to provide users with access to web part configuration, there are situations where these fields would be more useful if they were to be populated with values from a data source or even control another field.

This is where dynamic property pane fields come in. These are made possible using available functionality in SPFx. In this example, I will show you how to create a dropdown field which displays all the lists on a SharePoint site as options.

As this article is intended for intermediate level SPFx developers, I will skip right into the TypeScript that makes this all possible. If you need help getting a new SPFx project started, Microsoft has a pretty good tutorial on that on their site.

Step 1

In your web part TypeScript file (typically SolutionNameWebPart.ts), disable reactive property changes. This is because we will loading data from SharePoint and allowing reactive property changes would result in REST calls being made every time a change occurs in the property pane. Here’s what the code looks like:

Step 2

Next, add listTitle as a property of your web part. We want to use the dynamic dropdown we are creating to set the value in the solution.

Then add the listTitle and context as the properties that you pass into your React component. The code will look something like this:

Step 3

Now that you have declared that you need those properties in your web part, we’ll look at adding a reference to the Lists that will populate your dropdown options. Note that I’ve added a condition to keep track of whether the dropdown field is active or not. This is because we do not want the field to be active and potentially have a null passed into your web part.

Once we do that we can then add the dropdown field in the property pane.

Step 4

Now we can write some code to populate the dropdown field in the property pane dynamically from SharePoint. The code below assigned the results of a REST call to the SharePoint site where the web part is being served during development. Here, I have used the SP PnP library (https://pnp.github.io/) to help with the REST call.

Also in this example, I’ve also indicated that I only want to load lists that are visible to all users.

Step 5

Finally we wire up the dropdown field by initialising the list when the property pane is active.

You should see your dropdown populated with the lists from your SharePoint site when you edit the web part.

I hope this is helpful to you and gives you an idea on how to build some creative and flexible solutions in SPFx.

Our Brisbane team of flexible and creative experts, can assist with your SPFx needs so get in touch!