Dynamic Flyout Options in Microsoft Dynamics 365 Ribbon Using XRM Toolbox

Date: 9/6/2024

Final Output:

To customize the Microsoft Dynamics 365 ribbon, open the Ribbon Workbench in the XRM Toolbox, drag and drop the flyout button into desired location—whether it’s the home tab, grid, or form. For this guide, place the flyout button on the home tab.

After positioning the flyout button, the next step is to set the label and ID. This customization is flexible, allow to choose any ID and Label, as shown in the image below. These settings help personalize the Dynamics 365 interface.

After adding a flyout using Ribbon Workbench ,Now drag and drop a menu section inside it. Customize this menu section by setting an Id.

Once the menu section is added, drag and drop a button, set the button name "Hidden".

After that, create two commands

• createDynamicFlyoutMenu
• onClickFlyoutMenu

Currently same names are being used for both the commands and the JavaScript functions to avoid confusion.

1. In command add "Custom Javascript Action"
2. Library add "LIBRARY_NAME"
3. Function Name add "CreateDynamicFlyoutMenu"
4. where as in parameter select CRM Parameter and select "CommandProperties"

(Javascript portion will be discussed later in this blog)

Select the DynamicFlyout and then fill in the highlighted fields as follows:

• Command: CreateDynamicFlyoutMenu
• PopulateQueryCommand: CreateDynamicFlyoutMenu
• Populate Only Once: True
• CommandCore: CreateDynamicFlyoutMenu
• PopulateQueryCommand: CreateDynamicFlyoutMenu

Keep the values for ID, Label, Sequence, and TemplateAlias unchanged, they should remain as they are.

Next, select the hidden button and fill in the following fields:

• Command: OnClickFlyoutMenu
• CommandCore: OnClickFlyoutMenu

Create new web resource, include the following code

function CreateDynamicFlyoutMenu(commandProperties) {
    debugger;   
    var resultRibbonXml = "";
    var result = retrieveMultiple();

    var command = "stertak.stertak_employee.onClickFlyOutMenu.Command";

    if (commandProperties.SourceControlId != null) {
        var source = commandProperties.SourceControlId.split('|');
        if (source.length > 3) {
            command = source[0] + "|" + source[1] + "|" + source[2] + "|" + command;
        }
    }
 resultRibbonXml += "<MenuSection Id='stertak_employee.result.MenuSection' Sequence='10'><Controls Id='stertak_employee.result.Control'>";
if (result != null) {
    for (var i = 0; i < result.value.length; i++) {

        var Name = result.value[i]["stertak_name"];

        resultRibbonXml += "<Button Id='" + (i + 1) + "' Command='" + command + "' Sequence='" + ((i + 1) * 10) + "' LabelText='" + Name + "' />";
    }
}
    resultRibbonXml += "</Controls></MenuSection>";

    commandProperties["PopulationXML"] = '<Menu Id="stertak_employee.result.Menu">' + resultRibbonXml + "</Menu>";
}
function onClickFlyOutMenu(commandProperties)
{

    alert("Created Dynamic Flyout with id  " + commandProperties.SourceControlId + " selected. \n You can apply your logic here.");
  

}

function retrieveMultiple() {

	var req = new XMLHttpRequest();
    req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v9.2/stertak_employees?$select=stertak_name,stertak_employeeid", false);
	req.setRequestHeader("OData-MaxVersion", "4.0");
	req.setRequestHeader("OData-Version", "4.0");
	req.setRequestHeader("Accept", "application/json");
	req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
	req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
	req.send();

	if (req.readyState === 4) {
		req.onreadystatechange = null;
		if (req.status === 200) {
			var results = JSON.parse(req.response);
			return results;
		} else {
			Xrm.Utility.alertDialog(req.statusText);
		}
	}
}        

First, make a Odata Query to get the records. After getting the records, a dynamic button will be created based on this data.

1. Set the command name.
2. Set the entity name where flyout button will be added.
3. Add the fields that you got from your Odata Query. The name of the button you create will be based on the field you added.

Don't change any other part of the code except for what is highlighted in the image you have. Everything else should stay the same.

In the onClickFlyoutMenu function add custom logic to this function as needed.