Close Popup Dialog on Submission of Form

Introduction

In this guide, you'll learn how to open a form in a popup dialog and automatically refresh the listing page upon form submission in Joget. This approach ensures a seamless user experience by allowing users to complete forms in a modal window without navigating away from the listing. By following these steps, you can maintain your application's context and ensure that the user remains on the same page after submitting the form.

How does it work?

The process involves configuring a list and form UI element to open the form in a popup dialog and then redirect the user back to the refreshed listing upon submission. The setup can be applied to various use cases, including handling forms through the inbox.

In List, create a new link that points to a UI Form menu (e.g., named form).
Set the parameter embed=true to ensure the form opens within the dialog.
Remember to check Hyperlink Target and set it to Popup Dialog.
Go to the corresponding UI Form and configure its properties.
Check the option Show In Popup Dialog? to ensure the form is displayed as a modal.
On the second tab of the form's properties, which is Redirection, configure URL Redirect After Form Submission to point back to the UI List. This step ensures that after the form is submitted, the page refreshes and returns to the listing.
Doing the same to Inbox assignment
If you are dealing with forms through an Inbox UI instead of directly through a form, you can use a custom script to refresh the parent window after form submission. In the Inbox UI > Properties, add the following script to List View Custom Header:
```
<p>
<script type="text/javascript">// <![CDATA[
$(function(){
         if(window.top!==window.self)
              parent.window.location.replace(parent.window.location.href);
         })
// ]]></script>
</p>
```

Introduction

How does it work?

Related documentation