Dynamically Populating Ribbon Flyout Menu

Welcome to my old Blogspot blog! You can read this post on our new website: Read this post on our new website 

I was having a requirement to generate a dynamic ribbon menu under a button i.e. Flyout button menu sections, Here I want to share the steps for achieving this dynamic menu section. I have used Ribbon workbench and some JS scripts.

We need to achieve the highlighted menu dynamically.

Here in workbench, we need to add a flyout button

In the command action, call JS function "populateEnrollmentFlyout" that is responsible for adding the menu sections definition in XML. 

Add another command "programClicked" that will be triggered when the user clicks on the menu section button.

Below are the two JS functions used in the above commands.

 function populateEnrollmentFlyout(commandProperties) {
    var programsRibbonXml = "";
    var command="msd.lead.Command.ProgramClicked";
 
    var programs = retrieveMultiple('msd_programs', "?$select=msd_programid,msd_name"); 
    programsRibbonXml +="<MenuSection Id='msd.Lead.Programs.MenuSection' Sequence='10'><Controls Id='msd.Lead.Programs.Control'>"
    if (programs != null) {      
        for (var i = 0; i < programs.length; i++) {           
                var Name = programs[i].msd_name;
                var Value = programs[i].msd_programid;                
                programsRibbonXml+="<Button Id='" + Value + "' Command='" + command + "'  Sequence='"+((i+1)*10)+"' LabelText='" +Name +"' />" 
        }
    }
    programsRibbonXml +="</Controls></MenuSection>";
    commandProperties["PopulationXML"] = '<Menu Id="msd.Lead.Programs.Menu">' + programsRibbonXml + "</Menu>";
}

function programClicked(commandProperties) {
    alert ("program with id "+commandProperties.SourceControlId +" selected.");
}

Hope it will help!

You can find my new blog for adding flyout menu buttons in UCI: 

Dynamically Populating Ribbon Flyout Menu in Unified Interface