All new Dialog Builder (Alert.js) Supported Code for Dynamics 365

Paul Nieuwelaar, 13 July 2020

Alert.js -> Dialog Builder

We’ve been hard at work recently making some major changes to our Alert.js product. One of the changes we’ve been wanting to make for a while now is in the name, Alert.js. When this product was first created back in 2015, its original use was limited to creating alert/confirm style popups. Since then we’ve expanded the functionality to focus more on creating customisable dialogs and user experiences using the showPrompt function introduced in v3.0. For this reason, we’ve decided to rebrand the new version 3.1 as “Dialog Builder”.

AppSource

One of the biggest changes that we’re happy to announce is that we’re back on Microsoft AppSource! It’s been a hard road since Microsoft started cracking down on any code that accessed the Dynamics 365 DOM. A special exception was made for Alert.js back in 2018, but after tightening the requirements in 2019, we had to go back to the drawing board.

We’ve been working with Microsoft to make the solution more supported, without accessing the Dynamics 365 DOM. The all new AppSource version of Dialog Builder now uses a PCF custom control to access the Component Framework Popup Service to display the dialogs, rather than appending anything to the Dynamics 365 DOM. This means the code on AppSource is now 100% supported by Microsoft!

The trade-off for using a PCF control means that you must add the control to any forms using the alert.js library, whether from a form script or from a form command bar. The alert.js library is still referenced and used the same as before, so any existing code will still work after adding the control to the form. The other trade-off is that the Dialog Builder PCF control can only be added to forms, not views, which means the AppSource version no longer supports using the alert.js library from the command bar of a homepage view.

Because of these trade-offs, the full version of the code, including the fallback for accessing the Dynamics 365 DOM will be available and maintained on GitHub. The AppSource and GitHub solutions will follow the exact same versioning, so the GitHub solution can be installed overtop of the AppSource version to restore the full functionality, and we recommend this approach to ensure the solution works smoothly in all scenarios.

The GitHub version does not include the PCF control, and this is not required to use the alert.js library. If you still wish to access the supported benefits of the PCF control, you can install the AppSource version first, followed by the GitHub version which will add the PCF control to the solution.

The AppSource solution is only supported for Dynamics 365 online (v9.1) while the GitHub version continues to support from CRM 2013+.

New features in v3.1

In addition to all the changes to get the solution on AppSource, we’ve also made a bunch of usability improvements too. The full release notes can be found on GitHub, but I’ll mention a few of my favourites here.

The full solution has been rebuilt from the ground up in TypeScript, which means there’s now also a TypeScript definition which you can use with other projects.

This rebuild includes some major changes to the underlying HTML/CSS of the dialogs. Previously there were many HTML tables and JavaScript calculations to set the correct dialog dimensions. This has all been changed to use more dynamic flexboxes, so the dialogs are now much more responsive to various sizes.

Because of this more flexible design, we can now make use of CSS strings when setting the dialog height, width, and padding. Instead of only allowing pixels, we can now specify custom dimensions like “80%”. Users can now also dynamically resize and drag the dialogs around the screen.

The look and feel of the dialogs have also been updated to more closely match the Dynamics 365 Unified Interface, including a new “inline” property on fields to set the label to display beside the input, instead of on top.

We’ve also added some new extension methods to the prompt responses array, to make accessing the values easier. Previously the only way to access each value was by iterating through the array to find the correct ID, or accessing a specific index. With the new extension methods, you can now simply get the value of a specific ID or index, or get the IDs of all checkboxes or radio buttons selected within a group of fields.

There’s many more great new features we’ve added in v3.1. Be sure to check out all changes in the latest release notes.

Demo

We’ve also created a demo page where you can try out various scenarios, or create and test your own dialogs to see how easy it is to use.

For more information about Dialog Builder, check out our product page or our documentation.