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

2
  • 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/… Oct 4 '19 at 5:52
2

Thanks for the answer from @GautamSheth but I also thought outputting an empty PropertyPaneLabel is definitely not ideal as mentioned by @ColinGardner. However, I also don't think creating a new PropertyPaneControl that does nothing is a good idea either.

Here is how I am doing it, which I find to be much simpler and easier to understand for someone else looking at the code.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    // configure groupFields to show always
    const conditionalGroupFields: IPropertyPaneGroup["groupFields"] = [
      PropertyPaneCheckbox("Field1", {
        text: strings.Field1Label,
      }),
    ];

    // show Field2, only if Field1 is true
    if (this.properties.Field1) {
      conditionalGroupFields.push(
        PropertyPaneCheckbox("Field2", {
          text: strings.Field2Label,
        }),
      );
    }
    return {
      pages: [
        {
          groups: [
            {
              groupFields: conditionalGroupFields,
              groupName: strings.ConditionalGroupFieldsLabel,
            },
          ],
          header: {
            description: strings.PropertyPaneDescription,
          },
        },
      ],
    };
  }

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.