Custom Drop Down Menu in the Ribbon

November 21, 2011

I have been studying from the Microsoft SharePoint 2010, Application Development and as part of this I have been reviewing various topics such as web part connections, timer jobs and working on the ribbon.

Personally when studying I prefer to take a hands on approach and try things on my own rather than reading books or articles and it was when playing with customising the ribbon which resulted in me writing this blog post.

I created some simple ribbon examples without any issues, however when I tried to create a custom drop down item I found there were a few caveats.

The first error I encountered was ‘The display mode with name: Large is not valid for this control with id: RL.SharePoint.CustomTab.GroupOne.Controls.DropDown’. When looking at this I initially thought there must have been a typo in my XML somewhere but after search and searching I couldn’t see anything. Looking at the error I could see it wasn’t happy with the display mode large so comparing this with the XML, see figure 1, I could see I was setting the DisplayMode of the GroupTemplate element to be large so I tried changing this to Medium and the error disappeared.

Figure 1
  1. CommandUIDefinitionLocation=Ribbon.Templates._children>
  2.           <GroupTemplateId=RL.SharePoint.CustomTab.GroupOne.Template>
  3.             <LayoutTitle=OneMediumLayoutTitle=OneMedium>
  4.               <SectionAlignment=TopType=OneRow>
  5.                 <Row>
  6.                   <ControlRefDisplayMode=LargeTemplateAlias=dd1 />
  7.                 </Row>
  8.               </Section>
  9.             </Layout>
  10.           </GroupTemplate>
  11.         </CommandUIDefinition>  


Once I had corrected the error mentioned above I then started getting another error ‘Invalid argument’ and at first I had no idea what could be causing this. I reviewed my XML for the drop down control and noticed the command property hadn’t been set but even after setting this I was still getting the same error. From the error I figured it must be a missing property on the drop down control so I systematically added values to each property until I stopped getting the error. It turns out that it was the Width property that was causing the error, see full drop down XML below.

Figure 2
  1. <ControlsId=RL.SharePoint.CustomTab.GroupOne.ControlsToolTipDescription=Group One Controls Tool Tip
  2.                           ToolTipTitle=Group One Controls TitleToolTipShortcutKey=f>
  3.                   <DropDownId=RL.SharePoint.CustomTab.GroupOne.Controls.DropDown
  4.                              TemplateAlias=dd1Command=RL.Command.DropDown.OptionSelectedWidth=200px >
  5.                     <MenuId=RL.SharePoint.CustomTab.GroupOne.Controls.DropDown.Menu>
  6.                       <MenuSectionTitle=Menu Sectino OneId=RL.SharePoint.CustomTab.GroupOne.DropDown.Menu.MenuSectionOne>
  7.                         <ControlsId=RL.SharePoint.CustomTab.GeneralControls.DropDown.Menu.Controls>
  8.                           <Button
  9.                                 Id=RL.SharePoint.CustomTab.GeneralControls.DropDown.Menu.Option1
  10.                                 Command=RL.SharePoint.CustomTab.GeneralControls.DropDown.OptionSelected
  11.                                 LabelText=1 />
  12.                           <Button
  13.                                 Id=RL.SharePoint.CustomTab.GeneralControls.DropDown.Menu.Option2
  14.                                 Command=RL.SharePoint.CustomTab.GeneralControls.DropDown.OptionSelected
  15.                                 LabelText=2/>
  16.                           <Button
  17.                                 Id=RL.SharePoint.CustomTab.GeneralControls.DropDown.Menu.Option3
  18.                                 Command=RL.SharePoint.CustomTab.GeneralControls.DropDown.OptionSelected
  19.                                 LabelText=3 />
  20.                           <Button
  21.                                 Id=RL.SharePoint.CustomTab.GeneralControls.DropDown.Menu.Option4
  22.                                 Command=RL.SharePoint.CustomTab.GeneralControls.DropDown.OptionSelected
  23.                                 LabelText=4/>
  24.                           <Button
  25.                                 Id=RL.SharePoint.CustomTab.GeneralControls.DropDown.Menu.Option5
  26.                                 Command=RL.SharePoint.CustomTab.GeneralControls.DropDown.OptionSelected
  27.                                 LabelText=5/>
  28.                           <Button
  29.                                 Id=RL.SharePoint.CustomTab.GeneralControls.DropDown.Menu.Option6
  30.                                 Command=RL.SharePoint.CustomTab.GeneralControls.DropDown.OptionSelected
  31.                                 LabelText=6/>
  32.                         </Controls>
  33.                       </MenuSection>
  34.                     </Menu>
  35.                   </DropDown>
  36.                 </Controls>


Overall customising the ribbon was relatively straight forward and these small errors while frustrating weren’t the end of the world and once you’ve encountered them once you’ll know in the future. Anyway hope this saves someone else from having the same issues as me.


%d bloggers like this: