Audience: SPFx Reactjs developers.
[Part 1] Rethinking the SPFx Property Pane controls
[Part 2] Sample 1: Fluent UI controls
[Part 3] (this post) Sample 2: PnP SPFx Controls
[Part 4] The concept: leveraging Reactjs Portal for SPFx
[Part 5] Diving into the code
[Part 6] Sample 3: Microsoft Graph Toolkit controls
In part 2, I showcased the use of Fluent UI controls in the Property Pane. Now it’s the turn of the PnP SPFx Controls.
Today, the PnP portal on Github offers two sets of Reactjs controls for your SPFx solution:
- sp-dev-fx-controls-react are designed for the Web Part body
- sp-dev-fx-property-controls designed for the Property Pane
These libraries are extremely useful, because they are targeted at Microsoft 365 users and offer controls that you wouldn’t get out-of-the-box in other control libraries, not even with Microsoft’s own Fluent UI. For example: SharePoint list picker, list item picker, or people picker. The only library I can think of that comes close is the Microsoft Graph Toolkit, which we’ll tackle in part 6 of this series.
Listen to Joel Rodrigues introducing the SPFx Reactjs Controls, starting at 26:15 in the August 2 episode of the Microsoft 365 Developer Podcast.
Now, the painful part is that you need two libraries, because the Property Pane cannot use the regular controls and requires its own dedicated property controls. This is what we intend to change with the Property Pane Portal: use the same sp-dev-fx-controls-react library not just for the Web Part body, but also for the Property Pane!
The general steps are the same as in part 2, with the use of PropertyPaneHost and PropertyPanePortal. The only difference is the control itself:
Note how the context gets passed to the components through a Reactjs Context Hook. Here again, just like for the example in part 2, the Property Pane Portal allows us to leverage all the usual Reactjs patterns. The benefit is not just to skip the sp-dev-fx-property-controls library, but also pave the way to richer forms allowing more dynamic styling or interaction across components.
See it for yourself with the Github sample. A sppkg package (for demo purposes only) is included if you are in a hurry š
Path to SharePoint... and Beyond! 
hi, is it possible to redirect to a specific property pane record via URL? I am using SPFx PnP with React Tabs to build a property pane which corresponds to multiple tabs webpart on sharepoint modern page.
The aim is to provide a custom url which can link to another Tab residing in adifferent pag altogether.
Thanks.
I’d say no. First challenge, you would have to be very specific about which web part instance you are targeting, as there might be multiple instances on a same page. Second challenge, you would need a Url that opens the web part edit mode, I don’t know how this is possible.
Hi ,
This is good. I am using this. But I have one question about the controls which you are using.
If suppose I have to use PnP People Picker more then 1 time in property pane the how can I use it?
I haven’t tested it yet, but I would assume you can use any control as much as you want, just with a different property name. Are you seeing any issues?