SharePoint Framework All Property Types

The SharePoint Framework right pane is the topic of this article, definitely this is a good helpful functionality that allow to configure the client web part in reactive or not reactive way.
We have seen really simple scenarios with the properties, like text field, however the business cases are not ever simple, therefore we need to handle complex properties as well dropdown, checkbox, multiple line, toggle, link, slider and so on.

This is the list of properties available out of the box in the module ‘@microsoft/sp-webpart-base’ of SharePoint Framework:

  • Label
  • Textbox
  • Multi-line Textbox
  • Checkbox
  • Dropdown
  • Link
  • Slider
  • Toggle
  • Custom

Giuliano De Luca | Blog | SPFx All Property Types

As you can see in the image above, I used a reactive property pane, this means that every changes, will trigger a reaction from the part web client, naturally it’s also possible configure the behaviour to non-reactive mode, in this last case will be necessary confirm every changes with a button.

Insert the following function in the web part file if you decide to use a non reactive property pane because by default is reactive:

Regarding the code, to have the controls as well as the image above, is necessary replace the getPropertyPaneConfiguration in the web part file with the following snippet:

Check my video for the demo:

Enjoy Office 365 !