SharePoint Framework Custom Property Pane Fields

The SharePoint Framework has a few components that can be used as Property Pane Fields. The following components come out-of-the-box with the SP Framework as of version 1.3.4 – Button, Checkbox,Choice group, Dropdown, Horizontal rule, Label, Link, Slider, Textbox, Multi-line Textbox, Toggle, Custom.

In this article we’ll see how to create custom property pane fields in SharePoint Framework apps using JQuery UI.

All the custom Property Fields derive from the Parent Class PropertyPaneCustomField. This class provides a few methods and properties that can be used to construct a custom property.

For our example, we will try to create a Spinner control (JQueryUI).

Prerequisites –

  1. JQuery – Declare this in the Externals section of the config.json file
  2. JQueryUI – Declare this in the Externals section of the config.json file and include JQuery as a Dependency.

Alternatively, you can also use SPComponentLoader.loadScript(‘<URLtoScrpt.js>’) and require(‘jqueruUI’)

Methods –

We need a method that will have the actual logic to construct our Spinner Control and gets rendered when called from the CustomPropertyField’s OnRender method. In the getPropertyPaneConfiguration method, add the following section,

 

Key – The id of the control

onRender – The method name where the actual control gets rendered.

 

The above method creates a Spinner Element (basically a textbox) and adds it to the Dom. We’re not yet finished! We will need to use JQueryUI to render this spinner text field as an actual spinner Control with maximise and minimise arrows. Adding $(‘#spinnerElement’).spinner() at the end of the method will fail or in worst case, nothing will happen and you will just see a textbox.

It is always a good practice to return a Promise in onRender property of the PropertyPaneCustomField and add $(‘#spinnerElement’).spinner() after the promise is resolved.

e.g.

 

Leave a Reply

Next ArticleRetrieve data from SharePoint list via PnP JS and CAML Query