4

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?

1 Answer 1

4
+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.

Update

As Vardhaman mentioned in comments, looks like they have added the close method in the later versions. You can use it as:

this.context.propertyPane.close();
2
  • 1
    this.context.propertyPane.close(); is available now. It must have been introduced in one of the recent versions. Oct 23, 2019 at 16:56
  • Awesome, updating the answer ! Nov 7, 2019 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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