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.
Getting Started
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.
ArasLabs/custom-modal-dialog
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 dialogHeight and 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.
Demonstration of a modal dialog called with ArasModules.MaximazableDialog.show()
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.Dialog.show() for 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 Innovator\Client\javascript\ItemsGrid\InBasketTaskGrid.js. In this file are two calls to 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!
LOOKING FOR MORE ARAS INSPIRATION?
Subscribe to our blog and follow @ArasLabs on Twitter for more helpful content! You can also find our latest open-source projects and sample code on the Aras Labs GitHub page.