Dynamics 365 CE: Highlight Dirty (changed) fields

Came across a request, where users need to highlight/identify fields where value is changed (dirty). The ideal solution is to highlight the field by changing border or background color of the field. However, this is not possible using supported customizations, unless we use a custom PCF control (which is not an option due to timeline).

In order to avoid un-supported customizations, lets explore a solution within supported manners.

Problem

Highlight/Identify dirty fields (changed).

Solution

There is no way we can highlight a field (or change CSS/Color) using supported way, however, we can add notifications to the controls.

This mean, when a field value is updated, we will raise a notification on the field’s control to identify it is changed. This helps the users to understand what fields are being changed before they hit save.

Here is the high-level solution:

• Create a generic JavaScript function, which adds the notification when the field value is changed.
• Register this function onChange of the field.

Here is the sample JavaScript function:

function notifyDirty(executionContext) {
    
    const attribute = executionContext.getEventSource();

    // value changed?
    if(attribute.getIsDirty()) {

        // Notify All controls for this field.
        attribute.controls.forEach(
        
            control => control.addNotification({
                messages: ['Updated'],
                notificationLevel: 'RECOMMENDATION'
            })
        
        );

    }    

}

In the above function, we get the attribute which is changed, then adds a notification using addNotification method. Please note attribute.controls is a collection, because you can add an attribute more than once on a form. Also, we use RECOMENDATION level for the notifications, as the purpose is to show information.

Instead of registering this function one-by-one on all fields, you can bind it with all fields while loading the form, i demonstrated this technique in the following blog:

Result

Notice the notification bulb on the Phone field when it is updated:

That’s it, Quite Easily Done!