There are times when the fields on a single form are not enough to provide the full functionality you want available to your users. In these cases, you may need to display a dialog that prompts your users to enter some additional information.
Aras Innovator 11.0 supports several different ways of opening dialogs. Please note that not all of these methods are supported in every version of Aras Innovator 11.0. The supported versions for each of these methods will be noted where appropriate.
Opening a Form with a Dialog
One of the more common uses for dialogs is to open a custom form. In this example, we will be opening this simple form below in a number of different ways.
Modal Dialogs
Modal dialogs are special in that they halt execution of the surrounding javascript until they are closed. These kinds of dialogs were used quite often in earlier versions of Aras Innovator; however, modern browsers such as Google Chrome and Microsoft Edge no longer support modal dialogs.
Modal dialogs will work in Internet Explorer and Firefox in Aras Innovator 11.0 SP7 and earlier.
Returning a Value from a Modal Dialog
Before we open the dialog, we need to specify the functionality of the buttons on our form. Specifically, we want some way to return the name that a user enters into the textbox when a user clicks the OK button.
The onClick Field Event of the OK button on this form can be seen below.
The Cancel button simply calls window.close(); without setting a return value.
Opening a Modal Dialog
Now that we have a way to return the name, we can use the sample code below to open this form using a modal dialog.
To demonstrate the halting capabilities of modal dialogs, I have included an Alert after the dialog is opened that uses the name entered into the form.
Popup Dialogs
Popup dialogs do not halt execution of surrounding JavaScript and are more accepted in modern browsers.
At the time this blog was released, Popup Dialogs work in all versions of Aras Innovator 11.0 using any supported browser including Google Chrome.
Returning a Value from a Popup
The way in which we specify a return value for a popup is different than for a Modal Dialog. You can see this in the sample below.
Similarly, the Cancel button simply closes the window with parent.args.dialog.close(); with no return value.
Opening a Popup
By passing in the 'DefaultPopup' option instead of 'DefaultModal' to the modalDialogHelper, we can open a popup dialog instead.
Note that in this example, we are passing in an additional "callback" argument. This callback function will only execute after the dialog is closed and is necessary due to the non-halting nature of Popups.
To further demonstrate this non-halting behavior, I have included an alert after the call that opens the dialog. You will notice that this alert is called before the dialog is closed.
While this sample should function correctly in all currently released versions of Aras Innovator 11.0, the modalDialogHelper API is being phased out. For newer versions of Aras Innvoator, we recommend using the most recent dialog API.
ArasModules.Dialog
This new API streamlines both the way in which you open dialogs as well as the way in which you return values from them.
The ArasModules.Dialog API works in Aras Innovator 11.0 SP7 and greater using any supported browsers.
Returning a Value from a Dialog
As you can see in this sample of returning a value from a dialog opened with this new API, the process of closing the dialog has been combined into a single function call.
The Cancel button will call parent.dialogArguments.dialog.close(); with no arguments so that nothing is returned.
Opening a Dialog
The sample below will open a dialog using the ArasModules.Dialog API. You can see that the arguments are roughly the same, though they have been streamlined for ease of use.
One important thing to note with this new API is that the callback function is no longer passed in as an function argument. Instead, the built-in Promise functionality of JavaScript is used. This serves the same purpose of calling a function after the Dialog has been closed.
One thing you may have noticed in all of these samples is the use of the 'ShowFormAsADialog.html' page. This is a webpage included in the default installation of Aras Innovator that does as the name suggests and opens a dialog displaying the form corresponding to the ID passed in.
However, you can also replace the 'ShowFormAsADialog.html' with any other HTML page to display that instead.
Opening an HTML Page with a Dialog
For this example, I have written a simple HTML page that looks similar to our form.
I have named this "test_page.html" and have placed it into the /Client/customer/ folder of my code tree to separate it out from the standard installation of Aras Innovator 11.0 .
Now all we have to do is replace the content argument in our sample with this new HTML page.
In this example, I have also added a "header" parameter that I am using to set the header of the resulting dialog. You can add any number of custom parameters and retrieve them from your custom HTML page using the dialogArguments object.
In Conclusion
For a downloadable example of opening a form from a dialog, please see the Custom Modal Dialog community project.
Please leave a comment if you learned something from this blog post or if you have any questions about any of the examples covered.