Enhancing User Interactions with Common Control methods in Dynamics 365

Customizing user interactions in Dynamics 365 is pivotal for creating intuitive and user-friendly applications. This blog explores five essential JavaScript Client API methods that every Dynamics 365 developer should know to enhance form control behaviors dynamically. From displaying notifications to manipulating visibility and focus, these methods empower developers to tailor user experiences effectively.

1. Displaying Notifications with addNotification

The addNotification method is used to add a custom notification to a control, which can be crucial for guiding users or displaying warnings based on specific conditions within the form.

Consider a situation where a field value exceeds a set threshold and you need to immediately alert the user to verify the entered data. Using addNotification can help highlight this anomaly directly on the relevant control.

Code Example:

function checkThreshold() {
    var control = formContext.getControl("new_quantity");
    var quantity = control.getAttribute().getValue();

    if (quantity > 100) {
        var notification = {
            messages: ["Quantity exceeds inventory limit!"],
            notificationLevel: "WARNING"
        };
        control.addNotification(notification);
    }
}

2. Controlling Visibility with setVisible

The setVisible method allows you to show or hide controls dynamically on a form, enhancing the user interface by simplifying what users see based on their input or selections.

Imagine a form where certain fields should only be visible when a specific option is selected from a dropdown. Using setVisible, you can hide these fields to prevent confusion or clutter until they are needed.

Code Example:

function toggleFields() {
    var showDetails = formContext.getControl("new_showdetails").getValue(); 
   formContext.getControl("new_detailsection").setVisible(showDetails);
}

3. Setting Labels with setLabel

The setLabel method changes the label of a form control, useful for dynamically adjusting the interface based on the form context or user selections.

If a form serves multiple purposes, you might want to adjust the labels of certain fields to reflect the current usage scenario accurately.

Code Example:

function updateLabel() {    
	var isCustomer = formContext.getAttribute("new_type").getValue() === "Customer";
	var label = isCustomer ? "Customer ID" : "Supplier ID";
	formContext.getControl("new_partyid").setLabel(label);
}

4. Managing Focus with setFocus

The setFocus method is essential for directing user attention to a specific control, especially following an action that requires immediate user input or correction.

After clearing a form section for new input, you might want to set focus to the first field in that section to prompt the user to begin entry.

Code Example:

focusOnNewEntry() { 
	formContext.getControl("new_firstname").setFocus();
}

5. Disabling Controls with setDisabled

The setDisabled method enables or disables a control, preventing or allowing user interaction based on application logic.

You may need to lock fields from editing once they have been approved or verified to ensure data integrity.

Code Example:

function lockFields(postApproval) {
    formContext.getControl("new_price").setDisabled(postApproval);
}

How have you used these methods in your Dynamics 365 projects? Share your experiences or any questions in the comments below. Let’s explore the possibilities together!