Editing the DOM with Supported Dynamics 365 Custom Controls

Adam Murchison, 29 May 2019

Have you tried to edit/update/hack a field in Dynamics 365 so that it is styled and behaves just the way you want? Well now you can! This supported, new preview feature in Dynamics 365 uses the Custom Controls Framework to make previously unsupported customizations supported.

What is an unsupported customization?

Typically, an unsupported customization is when client-side code (Javascript) interacts with the document object model (DOM). An example of this would be getting an HTML element on the page and updating the styles of this element e.g. Making a field’s background colour blue. Other unsupported customizations are using any undocumented internal objects or methods in Javascript. This is noted by Microsoft here.

What is a custom control?

Out of the box flip-switch custom control:

A custom control overlaps a field so it appears and interacts differently than the standard field control. In Dynamics 365 there are many out of the box custom controls such as editable grids, flip-switches on Boolean fields and many more but now you can create your own. To get started I read and followed the demos from Microsoft, this is a full demo that shows you how to create a custom control. Custom controls are built in type script, XML and css. They utilize the developer command prompt for Visual Studio to build a solution that you can import into your Dynamics 365 environment.

Why use custom controls?

Custom controls can improve user experience and the overall interface of your standard form. You could edit the colour of fields, show images on the form, resize fields and the list goes on…  Another reason is that you can share your own custom controls with the community as they are not unique to a Dynamics 365 instance. Members of the Dynamics 365 community have shared their own custom controls on Github.

My own custom control:

I wanted my custom control to show as a different colour when the field reaches a certain value. My conditions were as follows: if the field value is null, don’t show a colour, if field value is under 50 show red, if field value is above 50 show as orange, if field value is above 100, show as green. The below screen shots show custom control on a Unified Interface form.

Important notes:

When creating my own custom control, for the custom control to actually update in the Dynamics 365 environment, I had to delete the custom control then import the updated solution so that the customizations overwrote the previous version of the custom control.

Summary:

There you have it! The new supported custom control framework. It’s surprisingly easy to learn and very cool so why not have a go and create your own custom controls to share with the Dynamics 365 community. There are many places to learn and many controls to be created!