I am trying to add a button to my property pane that will pop up a modal where the user will be able to enter in an image to be displayed on my banner webpart which is just an image carousel.

I currently have a PropertyPaneButton. I would like to set the value of the onClick key to a function as it's value that can setState within my webpart.tsx file allowing me to rerender the DOM. I have a stateful banner.tsx file that is holding my banner images for the carousel in an array.

My idea is that once the user clicks add image from the modal I'll be able to grab what's been entered in the text field, create a new object, and setState to have the DOM rerender with the new picture added to the carousel.

The issue seems to be that I am unable to link my webpart.ts file - where my property pane and add image button is, to my webpart.tsx file - where my state holding the images is.

Admittedly, I am new sharepoint framework and am having difficulties navigating the documentation for a possible solution.

1 Answer 1


Here how I would do it:

  1. Create a state variable that keeps track of whether to show/hide the dialog (e.g,: showCallout).
  2. In your constructor, set the variable to false.
  3. In your render method, conditionally wrap the dialog rendering code. E.g.: { this.state.showDialog ? : null }

The awesome sp-dev-fx-property-controls library uses a similar trick with their property controls, except that they use the Office UI fabric Callout controls. Check out the code at https://github.com/SharePoint/sp-dev-fx-property-controls/blob/f66083ed4b760dd8a4e28789f7bbcbed3249dfa9/src/common/placeholderWithCallout/PlaceholderWithCallout.tsx.

I hope I understood your question properly and this helps?

Good luck!

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.