When developing custom validations in Microsoft Dynamics 365, one common challenge is guiding users directly to the field that requires attention. Displaying an error message is helpful, but forcing users to manually search through multiple tabs and sections can lead to frustration and reduced productivity.
In a recent project, I implemented a more user-friendly approach that automatically:
Identifies the missing required field
Expands the tab containing the field
Scrolls the page to the correct location
Sets focus on the field
Displays a visual notification explaining the issue
The Problem
A standard validation message such as:
"The following required fields have not been populated."
does not always help users quickly identify where the missing data is located, especially in large forms containing multiple tabs and sections.
Even calling:
var ctrl = Xrm.Page.getControl("dps_externalcashcoveragecode");
if (ctrl) {
ctrl.setFocus();
}
is often not enough. While the control receives logical focus, Dynamics 365 may not automatically scroll the page to make the field visible.
A Better Solution
The following approach combines notifications, tab expansion, focus management, and scrolling.
var ctrl = Xrm.Page.getControl("dps_externalcashcoveragecode");
if (ctrl) {
// Display field notification
ctrl.setNotification(
"This field is required before continuing.",
"REQ_FIELD"
);
// Expand the containing tab
var section = ctrl.getParent();
var tab = section.getParent();
tab.setVisible(true);
tab.setDisplayState("expanded");
setTimeout(function () {
// Set focus
ctrl.setFocus();
// Scroll to the field
var element = document.querySelector(
"[data-id='dps_externalcashcoveragecode.fieldControl']"
);
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "center"
});
}
}, 200);
}
Why This Works
This solution improves usability in several ways:
1. Clear Visual Feedback
The notification immediately tells users what action is required.
ctrl.setNotification(
"This field is required before continuing.",
"REQ_FIELD"
);
2. Automatic Tab Expansion
Users no longer need to manually navigate through tabs to find the missing field.
tab.setDisplayState("expanded");
`
3. Focus Management
The field becomes the active control, allowing users to start editing immediately.
ctrl.setFocus();
4. Automatic Scrolling
Using scrollIntoView() ensures the field is visible, even when located far down the form.
element.scrollIntoView({
behavior: "smooth",
block: "center"
});
Removing the Notification
After the user enters a valid value, the notification can be removed programmatically.
ctrl.clearNotification("REQ_FIELD");
Best Practice
If multiple fields are missing, avoid jumping from field to field. Instead:
Validate all required fields.
Display notifications on all invalid fields.
Scroll and focus only on the first invalid field.
This provides a smoother and more predictable user experience while keeping the user informed about all validation issues.
Small usability improvements can have a significant impact on user adoption and productivity. Combining field notifications, automatic tab expansion, focus management, and scrolling creates a much more intuitive experience than simply displaying a generic error message.
For Dynamics 365 developers, investing a few extra lines of JavaScript can greatly improve form validation workflows and reduce user frustration when working with complex forms.