Add Dropdown Menu to CRM 2011 ribbon

Question

I 'm new to crm 2011. I've found documentation on how to add a new button to the ribbon. And how to group the buttons. But i need a dropdown menu button in the ribbon. How can i do this? I didn't found any information about this.

Thanks!

Bryan Weaver Bryan Weaver · Accepted Answer · 2011-04-30T14:08:22

This should get you started. If all you need is a static menu you can put the tag inside the Flyout Control and build the menu from there.

<FlyoutAnchor Id="Sample.account.form.FlyoutAnchor.Static"
              Sequence="10"
              Command="Mscrm.Enabled"
              Image16by16="/_imgs/placeholders/ribbon_placeholder_16.png"
              Image32by32="/_imgs/ribbon/newrecord32.png"
              LabelText="Sample Flyout"
              Alt="Sample Flyout"            
              TemplateAlias="isv">
  <Menu Id="Sample.account.form.Menu">
    <MenuSection Id="Sample.account.form.MenuSection" 
                 Title="Menu Section Title" 
                 Sequence="15">
      <Controls Id="Sample.account.form.MenuSection.Controls">
        <Button Id="Sample.account.form.Controls.Button.FirstButton"
                Command="Sample.ButtonCommand.Command"
                LabelText="First Button"
                ToolTipTitle="First Button"
                ToolTipDescription="The first button"
                TemplateAlias="isv"
                Sequence="20"/>
      </Controls>
    </MenuSection>
  </Menu>
</FlyoutAnchor>

If you want to generate the menu Dynamically you can use this flyout control instead. Note the Populate attributes that were added. Then you have to build the menu through javascript.

<FlyoutAnchor Id="Sample.account.form.FlyoutAnchor.Dynamic"
              Sequence="10"
              Command="Mscrm.Enabled"
              Image16by16="/_imgs/placeholders/ribbon_placeholder_16.png"
              Image32by32="/_imgs/ribbon/newrecord32.png"
              LabelText="Sample Flyout"
              Alt="Sample Flyout"
              PopulateDynamically="true"
              PopulateQueryCommand="Sample.PopulateDynamicMenu"
              TemplateAlias="isv" />

I created two commands that access the javascript functions. DynamicMenu builds the menu and the Search is used to determine which button control was pressed. Note both of these pass the CommandProperties parameter this is important for the javascript.

<CommandDefinition Id="Sample.PopulateDynamicMenu">
      <EnableRules>
        <EnableRule Id="Mscrm.Enabled" />
      </EnableRules>
      <DisplayRules />
      <Actions>
        <JavaScriptFunction FunctionName="DynamicMenu"
                            Library="$webresource:a_JavaScript_File">
          <CrmParameter Value="CommandProperties" />
        </JavaScriptFunction>
      </Actions>
</CommandDefinition>
<CommandDefinition Id="Sample.SearchCommand">
      <EnableRules />
      <DisplayRules />
      <Actions>
        <JavaScriptFunction FunctionName="Search" 
                            Library="$webresource:a_JavaScript_File">
          <CrmParameter Value="CommandProperties" />
        </JavaScriptFunction>
      </Actions>
</CommandDefinition>

Here are the javascript functions:

function DynamicMenu(CommandProperties) {
    ///<summary>Dynamically generate menu items based on context</summary>
    /// <param name="CommandProperties">
    ///    Command properties crm parameter sent from the ribbon.  object used to inject the Menu XML
    /// </param>

    var menuXml = '<Menu Id="Sample.DynamicMenu">' +
                    '<MenuSection Id="Sample.Dynamic.MenuSection" Sequence="10">' +
                        '<Controls Id="Sample.Dynamic.Controls">' +
                            '<Button Id="Sample.account.form.Controls.Button.FirstButton"' +
                                    ' Command="Sample.SearchCommand"' +
                                    ' LabelText="First Button"' +
                                    ' ToolTipTitle="First Button"' +
                                    ' ToolTipDescription="The first button"' +
                                    ' TemplateAlias="isv"' +
                                    ' Sequence="20" />' +                                  
                        '</Controls>' +
                    '</MenuSection>' +
                '</Menu>';


    CommandProperties.PopulationXML = menuXml;
}

function Search(CommandProperties) {
    ///<summary>Determines which control was pressed</summary>
    /// <param name="CommandProperties">
    ///    Command properties crm parameter sent from the ribbon.  object used to read which dynamically generated
    ///    button is selected.
    /// </param>

    var controlId = CommandProperties.SourceControlId;
    switch (controlId) {
        case 'Sample.account.form.Controls.Button.FirstButton':
            alert(controlId + ' was pressed!');
            break;        
        default:
            alert('unknown');
    }
}

Add Dropdown Menu to CRM 2011 ribbon

1 Answers