Using addOnChange in Dynamics 365 JavaScript: A Practical Example

If you're working with Microsoft Dynamics 365 and customizing forms using JavaScript, you’ve likely encountered the addOnChange method. This is a key method that allows you to trigger specific logic whenever a form field changes.

Let’s examine this common line of code:

formContext.getAttribute("your_field_name").addOnChange(Namespace.Module.OnChangeFunction.bind());

What Does This Code Do?

This line registers an event handler for the OnChange event of the your_field_name field on the form. In simple terms, it means:

"When the value of the specified field changes, execute the OnChangeFunction inside Namespace.Module."

Let's Break It Down:

• formContext.getAttribute("your_field_name")
  This retrieves the field (attribute) from the current form. Replace "your_field_name" with the logical name of your field (e.g., "new_type").

• .addOnChange(...)
  This method attaches a function to be called when the field value changes.

• Namespace.Module.OnChangeFunction.bind()
  This is a reference to the function that should be executed. The use of .bind() ensures the correct this context inside the function, especially useful when the function is part of a larger object or module.

Why Use .bind()?

If your event handler refers to this — for example, to access other methods or properties in your module — then .bind() is necessary to maintain the correct context. Without it, the function might not behave as expected when triggered by Dynamics.

Example Scenario

Imagine you have a field called "Type" on your form — it could have values like “Customer,” “Supplier,” or “Internal.” When a user changes this field, you might want to:

• Show or hide other fields,

• Lock or unlock sections,

• Trigger a warning or info message.

You can write that logic in a function (e.g., OnChangeFunction) and attach it using addOnChange.

Using addOnChange is a core part of client-side development in Dynamics 365. It enhances interactivity and allows you to create a more responsive user experience. Always remember to bind your functions properly when they're part of a structured object or module.