DEV Community

Guido Zambarda
Guido Zambarda

Posted on • Originally published at iamguidozam.blog on

1 1

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 ...], }, ], }, ], };}
Enter fullscreen mode Exit fullscreen mode

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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more