Sharepoint - Hide/Disable property pane component based on another component's value
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
Image 2 - toggle on