Modal dialogs are frequently used to collect user input throughout the Aras Innovator client – in both “out of the box” and custom use cases. When using the standard modal dialog function, the size and position of the dialog is fixed. However, users may want to expand the dialog to see the content better on their device. This post demonstrates how to call resizable dialogs using a built-in Aras client function.
You can find all of the code and files for section 1 of this demonstration on the Aras Labs GitHub page in the custom-modal-dialog project. If you want to install the project and follow along, the project page includes all of the instructions for installing the import package.
custom-modal-dialog – Sample code for calling a custom Aras form in a modal dialog.
Note: The maximizable dialog example was added in v2.3 of the custom-modal-dialog project.
1. Maximizing Custom Dialogs
Most modal dialogs in the Aras Innovator client are called using the
ArasModules.Dialog.show() function. The code for calling these dialogs looks something like the following sample code. This code is an excerpt from the
labs_CallCustomModalDialog method in the custom-modal-dialog community project.
The size of modal dialogs called with
ArasModules.Dialog.show() is fixed to the
dialogWidth values passed in the
params object. Once the dialog is called, it cannot be resized by the end user. However if we call the modal dialog using
ArasModules.MaximazableDialog.show()instead, the modal dialog will be rendered with a max/min button that the end user can click to resize the dialog.
The following code snippet from the
labs_CallMaxModalDialog method shows how to call the same modal dialog as a maximizable modal dialog. The only change from
labs_CallCustomModalDialog is to swap
ArasModules.MaximazableDialog.show(). The switch requires no change to the passed parameters.
2. Maximizing InBasket Dialogs
Just like we can call custom modal dialogs using
ArasModules.MaximazableDialog.show(), we can use it to call out-of-the-box Aras dialogs. Users frequently ask to enlarge the Aras InBasket dialogs, so we’ll take a look at updating the calls for those dialogs.
Warning! This demonstration modifies a file in the Aras Innovator code tree. Do not perform these changes in a live production environment. Always back up your code tree before applying a patch or modifying files. This ensures you can quickly and easily revert any changes.
In environments where the configurable InBasket is enabled (default in most Aras 11.0 instances), the InBasket grid loads from
ArasModules.Dialog.show(). One displays the correct dialog for completing an InBasket task, and the other displays a workflow process map if the currently selected task is a Workflow task. If we replace these two calls with
ArasModules.MaximazableDialog.show(), the end user will be able to maximize the resulting modal dialogs.
Here are two code snippets showing the changes.
Be sure to clear your browser cache after saving your changes. Next time you login, you should see the maximizable dialog load from your InBasket.
It isn’t really necessary to maximizing the Workflow Process dialog for the out-of-the-box ECO workflow shown above, but it can be very helpful for customers who may have ItemTypes with much larger Workflow Maps.
Have any questions or tricky use cases for modal dialogs in your Aras environment? Let us know in the comments below!