Add a custom Flyout menu with buttons and identify which button is clicked...

Requirement:

Add a custom Flyout menu with buttons and identify which button is clicked. 

Solution:

Step 1

Setup a custom solution and add your entity (just add metadata nothing else)

 

Step 2

 

Create a java script web resource with the following code:

if (typeof (HIMBAP) == "undefined") {  

    var HIMBAP = { __namespace: true };  

}  

   

   

HIMBAP.AccountRibbonLibrary =  

    {  

       IdentifyFlyoutClick: function (commandProperties)  

       {  

          if (commandProperties.SourceControlId.includes("Test1.Button")) {  

                alert("Test 1 Clicked");  

            }  

            else if (commandProperties.SourceControlId.includes("Test2.Button"))  

             {  

               alert("Test 2 Clicked");  

             }  

       }  

    };  

In the above code, I am using CommandProperties, and we will be passing this parameter from the Flyout button command and it will help us to identify which flyout button is selected, it provides these properties,

• SourceControlId: The Id value of the Ribbon control that initiated the event.
• CommandValueId: A string that is sent with the command event when a button is clicked.
• MenuItemId: A reference from a control to the Id of a menu item.

I am checking if the button Id contains specific text (Note: We need to include this in our button Ids)

Step 3

 

Open Ribbon Workbench solution and select your custom solution which includes your entity and web resource, we are using Account entity for the demo.

Step 4

 

Drag the Flyout button and drop it on the Form area.

 

 

Step 5

 

Click on + under Command to add a new command, change command Id accordingly and add a Custom JavaScript action

 

Step 6

 

Select your web resource, provide a function name. Click on the Add Parameter button and select Crm Parameter.

 

 

Step 7

 

Select CommandProperties from the available parameter list

 

Step 8

 

Now Drag Menu Selection under the flyout (above the line visible in the flyout button)

 

 

Step 9

 

Add Buttons under Menu Selection (I have added two buttons).

Step 10

 

Setup button properties like below (Use command we created in an earlier step).

 

 

Make sure you are adding button Ids based on your check, for example, I have modified the button Id to include the text I am validating in my web resource.

 

Now publish your changes and you should be able to see flyout like below and when clicked you should see a message based on the selection.