Dynamically Generating Ribbon Buttons

Dynamically Generating Ribbon Buttons

Hello Folks,

I had a requirement in which the Buttons in a ribbon to be shown dynamically, so for doing this we require a little bit of scripting and ribbon customization. For doing this I am using Ribbon Workbench tool and creating a Flyout button which I've read from Scott durow blog.

• Create a solution and add desired entitiy and Jscript file having script shown in last.
• In my scenario I wanted to have a button on Home Page, so using Ribbon Workbench I dragged a Flyout button on to the home section, once u dragged this button then by default a menu will be added as shown in below screenshot, so u need to remove it

• Now create two commands, one for dynamically generating Menu and another for calling when any of the menu is clicked.
• For dynamically generating Menu command,you need to add an action where you need to call a  Jscript function “populateDynamicMenu” and also you need to pass CRM Parameter CommandProperties as shown below and I’ve named this command as ct.contact.PopulateMenu.Command

•          For another command, you need to add an action where you need to call a Jscript function itemClicked and also you need to pass CRM Parameter CommandProperties as shown above screenshot. I’ve given this command name as ct.contact.ItemClicked.Command

• ·         Now Both your commands are ready so now you just need to hook those commands, so now open the your button(I’ve named it as FlyOut) properties as shown in screenshot

• ·         Now hook the commands created as shown in below screenshot

• ·         That’s it you are done, now publish the changes and got to desired entity and check it

•  Once you click the button it will call the action hooked to it, in my case I am alerting Button's Id as shown in below screenshot
  

Jscript

In the populateDynamicMenu function u need to add the button actions in <button> tag by giving the command which you have created for Action to triggered when a button is clicked, in my case it is ct.contact.ItemClicked.Command, so for each button give a unique Id, In my case I’ve given GUID.

And also Change the LabelText to show the label of the button, in my case it is Custom Report and Committee. you can make this a bit more generic by generating the <button> tags dynamically.

function populateDynamicMenu(commandProperties)

{

// Dynamically return the menu to show - this can be built at run time

commandProperties["PopulationXML"]='<Menu Id="demo.CustomReportMenu"><MenuSection Id="demo.CustomReportSection" Sequence="10"><Controls Id="demo.CustomReportControls"><Button Id="C2F4EFC4-3155-E511-80E1-3863BB341AF0" Command="ct.contact.ItemClicked.Command" Sequence="30" LabelText="Custom Report" /><Button Id="4431d3ca-d377-4b7d-b547-4e89806b18d5" Command="ct.contact.ItemClicked.Command" Sequence="30" LabelText="Committee" /></Controls></MenuSection></Menu>';

}

Function itemClicked is called when you click on any of the buttons, here you can get the Id of the button as shown in the below code.

function itemClicked(commandProperties)

{

debugger;

// Determine which button was clicked in the menu

alert(commandProperties.SourceControlId+ ' clicked');

}