UXP react creating modal

UXP Developer Tool
, ,
1

am new to UXP. I’ve gone through the uxp documentation but one thing I’ve struggled with is trying to create a modal button for the connector. can anyone shed light on me in this please? I’ve gone through the documentation both spectrum and UXP and tried googling but I’ve not come across any article or anyone mentioning this. insights will be much appreciated. thankyou. am using the react library

2

What is a connector and what a modal button would be? Did you mean just a normal button for modal dialog?

3

by connector I mean the plugin and by modal I mean the dialog menu. Like you can click on a button and a dialog menu pops up

4

So you need to have a <dialog /> element somewhere in your HTML and then have a button, which would call uxpShowModal() on that dialog. Eg.:

<dialog id="testDialog"><sp-body>Hello world!</sp-body></dialog>
<button id="dialogButton">Open</button>
<script type="text/javascript">
  document.querySelector("#dialogButton").addEventListener(
    "click",
    () => document.querySelector("#testDialog").uxpShowModal()
  )
</script>

image
image1041×558 64.3 KB

Unless by dialog menu you mean DHTML (absolute) popup instead of actual dialog

5

yes definitely. something like this but now in react.

6

React is same JS. Sorry, but I don’t know what components you have. Just change event listeners to onClick on your button

1 Like