4

enter image description here

On my property pane for a SPFx web part, I've got a Toggle and a Slider component.

How do make it so that when the Toggle is Off, the Slider is hidden/disabled?

9

You can make use of a standard boolean check to determine whether your toggle component has value. Based on that, you can show/hide your slider component. You can do this bool check in the getPropertyPaneConfiguration method itself as below. Here, if the toggle component is off, we will show an emptly label.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    let allEventsUrl: any;

    if (this.properties.toggleAllEvents) {
      allEventsUrl = PropertyPaneSlider('maxEvents', {
        label: "Max events",
        min: 1,
        max: 10,
        value: 1,
        showValue: true,
        step: 1
      })
    }
    else {
      allEventsUrl = PropertyPaneLabel('emptyLabel', {
        text: ""
      });
    }
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneToggle('toggleAllEvents', {
                  key: 'toggleAllEvents',
                  label: '',
                  checked: false,
                  onText: "Some text",
                  offText: "Some other text",
                }),
                allEventsUrl
              ]
            }
          ]
        }
      ]
    };
  }

End result:

Image 1 - toggle off

enter image description here

Image 2 - toggle on

enter image description here

  • Thanks, I was wondering what the standard pattern was for this. I couldn't find any examples. – kei Mar 26 '18 at 13:47
  • 1
    This approach is good enough for hiding controls in many cases but it is a bit ugly, as abusing the PropertyPaneLabel control in this way generally leaves unwanted space in the UI often forcing you to re-order controls so that ones that might be hidden appear last in the group. But that's not always what you want. I've come up with what I think is a better approach, which I just blogged about here kaboodlesoftware.com/2019/10/04/… – Colin Gardner Oct 4 at 5:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.