Audience: SPFx Reactjs developers.
[Part 1] Rethinking the SPFx Property Pane controls
[Part 2] (this post) Sample 1: Fluent UI controls
[Part 3] 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 1, I explained the objective of the Property Pane Portal: allow us to use any Reactjs controls library in the Property Pane. This post showcases the concept applied to the Microsoft Fluent UI Northstar controls. Here is a screenshot of the expected result for our Github sample:
To follow this post, a prerequisite is to be familiar with SPFx Reactjs and the default SPFx Property Pane. If you are only interested to test drive the Web Part, you can grab the sample sppkg file (demo purposes only) from Github.
In the Property Pane, each default control (text field in the example below) is generated by a built-in function (PropertyPaneTextField() in the example).
Let’s now see how the code in our Fluent UI Github sample differs.
With the Property Pane Portal technique, the generic function PropertyPaneHost() only generates the host of each control:
The controls themselves are included in the React DOM, along with the regular components used in the Web Part body (screenshot below). Then the job of the Reactjs Portal is to beam them to the Property Pane.
You’ll find the CustomPropertyPane component in CustomPropertyPane.tsx:
The machinery that supports the PropertyPanePortal component and the propertyPaneHost function is hosted in the PPP folder, and should work with any Reactjs controls library. Parts 4 and 5 will explore the concept and code in more details. In the meantime, feel free to post questions in the comments below.
Path to SharePoint... and Beyond! 