Toggle settings in the property pane of your SharePoint Framework web part

With the SharePoint Framework it is fairly easy to configure the properties you want to expose in the property pane of your web part. All you have to do is specify each of the property pane fields you want to show in the propertyPaneSettings function underneath the groupFields property.

Show image

There are various types of property pane fields like text, dropdown, toggle, checkbox, and if that is not enough or you need a special one, you have the ability to build it yourself.

When you are defining your properties, they will be immediately visible in the web part property pane. In most cases that is the behavior you want, but in my case, I wanted to be able to toggle between settings.

Let me give you an example so you can see what I mean. In my POC search web part, I have a dropdown that will be visible the first time you open the property pane:

Show image

This dropdown is used to select an internal template. I also have the option to show data from an external template, but I did not want to show both options. So what I did, I added the “use an external template” toggle. One you toggle this setting, the dropdown will be gone and a textbox appears.

Show image

This example works with a toggle, but you can also achieve this when you select a specific property in the dropdown or something else.

I achieved it with the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  let templateProperty: any;
  if (this.properties.propertyToggle) {
    templateProperty = PropertyPaneTextField('propertyOn', {
      label: 'Property shown when toggle is turned on'
    });
  } else {
    templateProperty = PropertyPaneDropdown('propertyOff', {
      label: 'Property shown when toggle is turned off',
      options: [{key: "Option1", text: "Option 1"}, {key: "Option2", text: "Option 2"}]
    });
  }

  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
              PropertyPaneTextField('description', {
                label: strings.DescriptionFieldLabel
              }),
              PropertyPaneToggle('propertyToggle', {
                label: 'Property toggle'
              }),
              templateProperty
            ]
          }
        ]
      }
    ]
  };
}

Have fun coding with the SharePoint Framework!