Close Popup Dialog on Submission of Form

Introduction

In this guide, you'll learn how to open a form in a pop-up 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 pop-up dialog and then redirecting 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 hyperlink 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 the Hyperlink Target and set it to Popup Dialog.
Go to the corresponding UI Form and configure its properties.
Check the Show In Popup Dialog? option to ensure the form is displayed as a modal.
Uncheck the Display Field as Label When Readonly? option.
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>
```