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 🙂