Dynamically Show/Hide Dynamics 365 Form Sections with JavaScript

In Microsoft Dynamics 365, forms can sometimes become overwhelming with numerous fields and sections. To streamline the user experience and guide users to the most relevant information, it's often necessary to display specific sections only when certain conditions are met. Dynamically showing and hiding sections based on field values is a powerful technique to achieve this.

Why Use Dynamic Section Visibility?

Implementing dynamic section visibility offers several key benefits:

• Reduces Form Clutter: By hiding irrelevant sections, users are presented with a cleaner, less intimidating form.
• Guides User Workflow: Information is displayed contextually, helping users focus on the task at hand and enter data more efficiently.
• Improves Data Entry Accuracy: Presenting only necessary fields reduces the chance of errors or confusion.
• Enhances User Experience: A dynamic and responsive form feels more modern and intuitive.

Step-by-Step Guide to Implementing Dynamic Section Visibility

Let's walk through the process of creating dynamic form sections in Dynamics 365 using JavaScript.

Step 1: Identify the Controlling Field and Target Section

Before writing any code, you need to determine:

• The Controlling Field: This is the field whose value will dictate whether a section is shown or hidden. For example, a 'Type' field (e.g., Lead Source, Opportunity Type).
• The Target Section: This is the specific section within a tab that you want to make visible or invisible. You'll need to note the Tab Name and the Section Name.

You can find these names by navigating to the form editor in Dynamics 365. Select the field or section, and its logical name will be displayed in the properties pane.

Step 2: Create a JavaScript Web Resource

Next, you'll create a JavaScript web resource to hold the logic for controlling section visibility. This involves writing a function that checks the value of your controlling field and then uses the Dynamics 365 client API to set the visibility of the target section.

Sample JavaScript Code

Here's a sample JavaScript function. Remember to replace placeholders with your specific field, tab, and section names.

function toggleSection(executionContext) {
    // Get the form context
    var formContext = executionContext.getFormContext();

    // Get the value of the controlling field (replace 'new_type' with your field's logical name)
    var controllingFieldValue = formContext.getAttribute('new_type').getValue();

    // Define the tab and section names (replace 'tab_general' and 'section_details')
    var targetTabName = 'tab_general';
    var targetSectionName = 'section_details';

    // Logic to determine visibility based on the field value
    // Example: Show section if 'new_type' is 100000000 (a specific option set value)
    if (controllingFieldValue === 100000000) {
        formContext.ui.tabs.get(targetTabName).sections.get(targetSectionName).setVisible(true);
    } else {
        formContext.ui.tabs.get(targetTabName).sections.get(targetSectionName).setVisible(false);
    }
}

Explanation:

• executionContext: This object provides access to the form and its context.
• formContext.getFormContext(): Retrieves the form object.
• formContext.getAttribute('new_type').getValue(): Gets the current value of the field named 'new_type'.
• formContext.ui.tabs.get(targetTabName).sections.get(targetSectionName).setVisible(true/false): This is the core client API call that sets the visibility of the specified section within the specified tab.

Step 3: Register Events for the JavaScript Function

Once your JavaScript web resource is created and saved, you need to associate it with your form:

1. Add the JavaScript Library to the Form: In the form editor, go to the 'Form Properties' and add your JavaScript web resource under the 'Events' tab.
2. Register the 'OnLoad' Event: Within the 'Form Properties', under the 'Events' tab, select the 'OnLoad' event. Add your JavaScript function (e.g., toggleSection) as an event handler. Ensure the 'Pass execution context as first parameter' checkbox is ticked. This ensures the function runs when the form initially loads.
3. Register the 'OnChange' Event for the Controlling Field: Select your controlling field (e.g., 'new_type') in the form editor. Open its properties, go to the 'Events' tab, and add your JavaScript function as an event handler for the 'OnChange' event. Again, ensure the execution context is passed. This makes the function run every time the value of the controlling field changes.

Testing Your Implementation

After saving and publishing your form customizations:

• Open a record of the entity you customized.
• Observe the initial state of the section based on the default value of the controlling field.
• Change the value of the controlling field to meet the condition (e.g., select the value that should show the section). Verify that the section appears.
• Change the value back to a state that should hide the section. Verify that it disappears.

Best Practices

To ensure your dynamic forms are robust and maintainable:

• Keep Section Names Consistent: Use clear and descriptive logical names for your tabs and sections. This makes your JavaScript easier to read and manage.
• Handle Null Values: Consider what should happen if the controlling field is empty. You might want to hide the section by default or display it based on a specific null handling logic. Modify your JavaScript to account for this (e.g., using if (controllingFieldValue === null || controllingFieldValue === undefined)).
• Use Reusable JavaScript Functions: If you have multiple forms or sections that require similar dynamic visibility logic, create generic, reusable functions. This promotes code consistency and reduces duplication.
• Consider Performance: For very complex forms with many dynamic elements, be mindful of the number of JavaScript handlers. While generally performant, excessive handlers could potentially impact load times.
• Use Option Set Labels Wisely: If your controlling field is an Option Set, it's generally better to check against the numerical value (e.g., 100000000) rather than the label (e.g., 'Web'), as labels can be translated and changed more easily.

Conclusion

Leveraging JavaScript to dynamically show or hide sections based on field values is a straightforward yet highly effective method for creating more intuitive and user-friendly forms in Dynamics 365. By reducing clutter and guiding users through relevant data, you can significantly enhance the overall user experience and improve data quality.