Dynamically Setting Button Visibility Based on Subgrid Data in Dynamics 365

 In Microsoft Dynamics 365, ensuring that user interfaces react dynamically to data changes is crucial for creating intuitive and efficient workflows. One common requirement is to control the visibility of buttons based on the data present in subgrids. This article will demonstrate how to implement this functionality using JavaScript, enhancing the user experience by hiding or displaying buttons contextually.

Why Manage Button Visibility?

Managing button visibility based on subgrid data can significantly enhance the user experience. For example, you might want to hide a "Create Invoice" button if there are already related invoices displayed in a subgrid, preventing duplicate entries and guiding the user towards the next logical step in their workflow.

How It Works

The JavaScript function provided below leverages the Dynamics 365 Client API to dynamically check for data in a specific subgrid and set the visibility of a related button accordingly. This approach uses asynchronous operations to fetch subgrid data without blocking the user interface, ensuring a smooth interaction.

JavaScript Implementation

Here’s the function that accomplishes this:

/**

 * Asynchronously determines if a button should be hidden based on the presence of data in a related subgrid.

 * The function dynamically checks for records in a specified subgrid table, filtering by a parent lookup column.

 *

 * @param {Xrm.Controls.GridControl} selectedControl - The subgrid control on the form.

 * @param {string} parentLookupColumnName - The schema name of the parent lookup column.

 *

 * @returns {Promise<boolean>} - Returns true if the subgrid is empty, false otherwise.

 */

async function hideButtonIfSubgridHasData(selectedControl, parentLookupColumnName)

{

    debugger;

    var formContext = selectedControl.getParentForm();

    var parentRecordId = formContext.data.entity.getId().replace('{', '').replace('}', '');

    var subgridTableName = selectedControl.getEntityName();

    var lookupFieldName = "_" + parentLookupColumnName + "_value";

   

    try

    {

        var filterQuery = "?$filter=" + lookupFieldName + " eq " + parentRecordId;

        var result = await Xrm.WebApi.retrieveMultipleRecords(subgridTableName, filterQuery);

        var isVisible = result.entities.length === 0;

    }

    catch(error)

    {

        console.log(error.message);

    }

    return isVisible;

}

Usage

To use this function, simply call it from an event handler associated with the form where the subgrid and button are located. For instance, it can be triggered when the form loads or when the data in the subgrid changes. This function takes two parameters: the control for the subgrid and the schema name of the parent lookup column to filter the records correctly.

Example:

Conclusion

Implementing dynamic visibility of buttons based on subgrid data not only streamlines the processes within Dynamics 365 but also prevents user errors. By using JavaScript, you can effectively tailor the user interface to the current context, enhancing overall system usability and user satisfaction.

By incorporating these practices into your Dynamics 365 deployments, you ensure that your applications are both user-friendly and robust, leading to better adoption and more efficient workflows.