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
We need to achieve the highlighted menu dynamically.
Here in workbench, we need to add a flyout button
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: