New Fully Customizable Dialogs in Dynamics 365 with Alert.js 3.0

Paul Nieuwelaar, 14 March 2018

image

Alert.js version 3.0 is going to be available very soon, and with it comes a bunch of cool new features, most anticipated of all is the new ‘showPrompt’ function which enables you to create fully customizable prompts, similar to what dialog processes provide in Dynamics 365.

Microsoft recently deprecated dialog processes in Dynamics 365 9.0. Historically, dialog processes have been the only real way to create customizable step by step processes to capture input from a user, and use that input to perform some other logic. Task Flows are slowly being rolled out, which gives us some flexibility as developers, but these still have limitations, and they’re currently only available on the unified interface, so not very useful at the moment.

As of version 3.0 for Alert.js, it’s now possible to easily set up some simple input forms using the new ‘showPrompt’ function. This works similar to the standard ‘show’ function, but includes an additional parameter where you can specify an array of fields to capture input of different types, including single line text fields, multi line text fields, numbers, radio buttons, checkboxes, date/date times*, option sets, lookups**, file pickers, and more!

Without giving too much away, here’s a couple of examples of what can be done using the new Alert.js v3.0 showPrompt function.

Recreate Out-of-the-box Functionality

For as long as I can remember, the Dynamics 365 community have been asking how to customize the out-of-the-box popups Microsoft uses throughout the system, including the Close Opportunity, Create Order, and Resolve Case screens. With Alert.js 3.0 we can overwrite these functions to display our own customized screens, while maintaining a familiar look and feel.

image

Nested Alerts

Previously with Alert.js it has not been possible to display 2 alerts at the same time. This made validation difficult, especially when this validation needed to be run on top of an already visible web resource. With Alert.js version 3.0 we can now give each alert a unique ID so that they don’t overwrite any other visible alerts.

This works great when validating input fields from a prompt, to make sure required information is captured before continuing.

image

This is also useful if you need to lock the UI with a loading spinner while an async operation is completed in the background.

image

File, and other HTML 5 Inputs

You can use the ‘file’ input type to allow users to upload files from their computer into Dynamics 365 through a nice user-friendly interface. The file data returned includes all the information about the files, as well as the base64 contents, so you can use this with the Web API to create notes/attachments in Dynamics 365, or upload them directly to SharePoint.

Other supported HTML 5 input types include: text, number, date, datetime-local, radio, and checkbox.

image

There are many more cool new features available in Alert.js 3.0, which is going to be fully released very soon. Contact us for more information about version 3.0 commercial licensing, or if you’re interested in getting early access. Alert.js 2.1 will continue to be available for free on Github (https://github.com/PaulNieuwelaar/alertjs) and on Microsoft App Source (https://appsource.microsoft.com/en-us/product/dynamics-365/magnetism.alertjs). Stay tuned for more updates regarding the version 3.0 launch!


* Date/date time pickers are not available in Internet Explorer. Dates can still be entered manually in IE.
** Lookups are only available in Dynamics 365 v9.0+. Earlier versions will display an error when used.