DALL·E 2024-02-26 21.12.12 - A digital illustration for a blog post thumbnail, featuring a stylized representation of a Microsoft Dynamics 365 form with OptionSet fields

Quick Tip: Show and Hide Option Set Options in Dynamics 365 with JavaScript

Dynamics 365, JavaScript / By

In this quick tip, we’ll explore how to show and hide options within an Option Set field in Microsoft Dynamics 365 forms using JavaScript. This approach is particularly useful when you need to tailor the user interface based on specific conditions, such as user roles, field values, or any logic that requires a more dynamic form experience.

Use case

Imagine you have an Option Set field in your Dynamics 365 entity form that needs to adapt based on certain conditions. For example, certain options should only be available to users in specific roles or depending on the values of other fields on the form.

The JavaScript Solution

To achieve this, we can use a simple JavaScript function that leverages the form’s execution context to hide or show Option Set values dynamically. Here’s a basic script that demonstrates how to hide specific options based on a Demo Security Role, otherwise show all fields:

// Check if the sdk object exists in the global window scope; if not, create an empty object.
// This ensures that we're adding to an existing sdk object or initializing it if it doesn't exist.
var sdk = window.sdk || {};

// Immediately Invoked Function Expression (IIFE) to encapsulate our code
// and avoid polluting the global namespace.
(function () {
    "use strict"; // Enforce stricter parsing and error handling in the code.

    // Function to dynamically show or hide option set values based on the current user's security role
    this.showHideOptionsBasedOnSecurityRole = function (executionContext) {
        // Get the form context from the execution context, allowing access to form data and controls.
        const formContext = executionContext.getFormContext();

        // Access the specific option set control on the form.
        const optionSetFieldControl = formContext.getControl("fe_optionsetfield");

        // Retrieve the current user's security roles.
        const userSecurityRoles = Xrm.Utility.getGlobalContext().userSettings.securityRoles;

        // Specify the ID of the security role to check against.
        const securityRole = "bead524b-ddd4-ee11-9079-000d3aa81fd9"; // Example Security role ID

        // Define all possible options for the option set.
        const allOptions = [
            { value: 1, text: "Option One" },
            { value: 2, text: "Option Two" },
            { value: 3, text: "Option Three" },
            { value: 4, text: "Option Four" },
            { value: 5, text: "Option Five" }
        ];

        // Define a subset of options to show if the user has the specified security role.
        const optionsToShow = [
            { value: 1, text: "Option One" },
            { value: 2, text: "Option Two" },
            { value: 3, text: "Option Three" }
        ];

        // Remove all options from the option set control to start fresh.
        optionSetFieldControl.getOptions().forEach(option => {
            optionSetFieldControl.removeOption(option.value);
        });

        // Check if the user has the specified security role.
        if (userSecurityRoles.includes(securityRole)) {
            // If the user has the security role, only add the specified subset of options.
            console.log("User HAS the Demo Security role. Show Option One, Option Two, Option Three");
            optionsToShow.forEach(option => optionSetFieldControl.addOption(option));
        } else {
            // If the user does not have the security role, add all options back to the control.
            console.log("User HAS NOT the Demo Security role. Show Option One-Five");
            allOptions.forEach(option => optionSetFieldControl.addOption(option));
        }
    };

}).call(sdk); // Execute the function with 'sdk' as its execution context.

Extend Functionality

To enhance this script further, you could add functionality to conditionally show or hide options based on more complex logic. This could involve checking other user roles, other field values, or even data retrieved from external sources.

Conclusion

Dynamically adjusting the options available in an Option Set field can significantly improve the user experience in Dynamics 365, making forms more intuitive and relevant to the user’s needs. With a bit of JavaScript, you can easily control which options are available under different conditions, making your Dynamics 365 customizations even more powerful.

Remember to test your script thoroughly in a development environment before deploying it to production, to ensure it behaves as expected and doesn’t impact the user experience negatively.

Happy customizing!

Resources:

For More Content See the Latest Posts