Dynamics 365 CE: Register OnChange event on all fields in a form

Dynamics 365 CE Business Rules are very handy to apply form validations and rules, however, every now and then we encounter advanced scenarios to apply form or field validations (or actions) using JavaScript. For example:

• Validate field value using Regex
• Call Web API to retrieve related data

We can write a JS function and attach it with on change event of a field. How about if we need to attach same event to all fields on the form? One way is to register this function, one by one, on all fields. But it has 2 problems:

1. It’s gonna take time.
2. When ever we add a new field, we need to configure on change event.

Now coming to the solution, using Dynamics 365 Client API, we can register on change event programmatically (addOnChange).

In this post, we are going to explore how we can attach an on change event with all fields on a form programmatically.

Problem

Register on change event on all fields of a form programmatically.

Let’s assume, we need to make sure data entered in all the Text fields are in CAPS. This means, we need to register a JS function on all text fields, which should convert the text to UPPER case.

Solution

Without further-ado, here is the logic:

• Write a JS function to convert fields value to UPPER case.
• Get all Text fields on Load of the form, and add the on change event programmatically.

Here is the sample code:

// Register on Load of the Form, pass execution context as first parameter
function onLoad(executionContext) {

    // Get Form Context
    const formContext = executionContext.getFormContext();

    // Get Attributes collection
    const attributes = formContext.data.entity.attributes;

    // Attach On Change for all attributes
    attributes.forEach(addOnChangeForCaps);

}

// Attach On Change Function for string attributes.
function addOnChangeForCaps(item, index) {

    
    const attribute = item;

    if (attribute.getAttributeType() === "string") {
        
        attribute.addOnChange(toCaps);

    }


}

// On change, set value to UPPER
function toCaps(executionContext) {

    const attribute = executionContext.getEventSource();

    const attrValue = attribute.getValue();

    attribute.setValue(attrValue.toUpperCase());

}

Register the above code on Load of the form, do not forget to pass execution context as first parameter.

Here is the break down of each function:

• onLoad: using form context, get attributes collection (formContext.data.entity.attributes) and loop through each attribute and pass it to a function (addOnChangeForCaps).
• addOnChangeForCaps: if the current attribute (in for each loop) is a text field, bind on change event with it (attribute.addOnChange(toCaps)).
• toCaps: event handler for text fields, converts the text to UPPER case.

Result

Now, when we type and leave a text field, it is automatically converted to UPPER case.

Before:

That’s it, Quite Easily Done!