3

I'm using the following command to open my propertyPane in SharePoint Framework.

this.context.propertyPane.open();

But there is sadly no close() option, so is there another way to close/hide the propertyPane again?

2
+50

Yeah, no good option available right now to close the property pane via API.

But then you can use document.querySelector to find the close button element and then programmatically trigger the click event.

You can modify from below sample code:

if(this.context.propertyPane.isPropertyPaneOpen()){
  var element = document.querySelector("button[class*='propertyPaneClose_']") as HTMLButtonElement;
  if(element != null){
    element.click();
  }  
}

Have used it in the onPropertyPaneFieldChanged to check whether a particular property was set to the value and based on that i triggered the property pane close event like below. Here, I am checking whether the description property equals Hi and if that's the case, i check if the property pane is open and then i close the property pane :

protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
    if (propertyPath === 'description' && newValue) {
      if(newValue == "Hi"){
        this.properties.description = newValue;        

        if(this.context.propertyPane.isPropertyPaneOpen()){
          var element = document.querySelector("button[class*='propertyPaneClose_']") as HTMLButtonElement;
          if(element !=null){
            element.click();
          }          
        }
      }      
    }
}

Would ideally like to have the close method available via SPFx but since this is not yet available, you can use this workaround.

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.