SPFx web part and navigation in the property pane

When developing an SPFx web part solution and have multiple configurations to make available in the property pane you can split those in multiple pages because luckily there is a built-in navigation handling in the property pane!

When developing a web part and using the method getPropertyPaneConfiguration you can see that the returned object contains a pages property that is an array of objects, each one of those objects contains:

• an header , with the name of the configuration page.
• a groups property, which contains the groups that are composed by:
  • groupName , containing the name of the group.
  • groupFields property that is an array containing the effective fields to be added in the current group.

Once specified the SPFx engine will handle itself the navigation!

I’ve created a sample solution to show you how this will look like and how to achieve it. Starting with the result and focusing only on the property pane there are the results:

• The first page

• The second page

• The third and last page

The code of the getPropertyPaneConfiguration is the following:

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { return { pages: [{ header: { description: strings.FirstPageDescription, }, groups: [ { groupName: strings.BasicGroupName, groupFields: [ ... omitted for brevity ...], }, { groupName: strings.AdvancedGroupName, isCollapsed: !this.properties.showAdvancedSettings, groupFields: [... omitted for brevity ...], }, ], }, { header: { description: strings.SecondPageDescription, }, groups: [{ groupName: strings.BasicGroupName, groupFields: [ ... omitted for brevity ...], }, ], }, { header: { description: strings.ThirdPageDescription, }, groups: [{ groupName: strings.BasicGroupName, groupFields: [ ... omitted for brevity ...], }, ], }, ], };}

Here you can see that I have three items defined in the pages property, and also you can see that there can be multiple groups inside each page.

If you want to have a look to the code or test it yourself you can find the code here.

Hope this helps!