We need to create a button that, when clicked, prompts a dialog to enter a message. Upon submitting the message, it should send an email with the entered content. Currently, I am testing the dialog available in the script runner. I wrote the dialog script under ‘rest endpoints’ and referenced the path in the URL within ‘UI fragments’ where the button is created. However, when the button is clicked, it redirects to another page displaying the dialog content instead of showing the prompt. This is not the desired behavior. How can I modify this setup to display the prompt correctly without redirecting to a new page?
Hi “testusername”,
I’d like to suggest you to try out HTMX. 
It does not need a lot of changes.
Add htmx load into UI Fragments and modify you button accordingly.
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<a hx-get="/rest/scriptrunner/latest/custom/mydialoghtml" hx-target="#navigator-sidebar" hx-swap="innerHTML">Summon D.Alog!</a>
Adding to your button hx-get instead of href and proper hx-target would allow htmx to run AJAX request and then add your dialog HTML code into the current page.
You can read more on how htmx works here: </> htmx ~ hx-get Attribute
@nikolayr Thank you for the reply. But where should I include the code?
This is the only option I see
Ah you have “Custom web item”. I thought you have UI Fragment type “Show Web Panel”. It can add elements into UI with conditions.
With “Web Panel” you can add the following script into field “Provider class/script”:
writer.write('''\
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<a hx-get="/rest/scriptrunner/latest/custom/mydialoghtml" hx-target="#navigator-sidebar" hx-swap="innerHTML">Summon D.Alog!</a>""");