Create a custom group in the SharePoint Ribbon

Create a custom group in the SharePoint Ribbon header image

Creating custom ribbon commands is all inline with the SharePoint User Experience, and thus something you should keep in mind whenever you are developing for SharePoint 2010.  However I found myself in need of creating a new group within an existing tab and stumbled upon the next MSDN article, however a minor detail is that you cannot add a CommandUIHanlder without a CommandAction. So in order to get the script working you have to delete the line with Command="EnableCustomGroup" and the line with <CommandUIHandler Command="EnableCustomGroup" />.

Leaving you with a script like you can find below to create a custom group:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
    Id="Ribbon.WikiPageTab.CustomGroupAndControls"
    Location="CommandUI.Ribbon"
    RegistrationId="100"
    RegistrationType="List">
    <CommandUIExtension>
      <CommandUIDefinitions>
         <CommandUIDefinition
           Location="Ribbon.WikiPageTab.Groups._children">
           <Group
             Id="Ribbon.WikiPageTab.CustomGroup"
             Sequence="55"
             Description="Custom Group"
             Title="Custom Group"
             Command="EnableCustomGroup"
             Template="Ribbon.Templates.Flexible2">
             <Controls Id="Ribbon.WikiPageTab.CustomGroup.Controls">
               <Button
                 Id="Ribbon.WikiPageTab.CustomGroup.Controls.CustomButton1"
                 Command="CustomButtonCommand1"
                 Image16by16="/_layouts/images/FILMSTRP.GIF"
                 Image32by32="/_layouts/images/PPEOPLE.GIF"
                 LabelText=""
                 TemplateAlias="o2"
                 Sequence="15" />
             </Controls>
           </Group>
         </CommandUIDefinition>
        </CommandUIDefinitions>
       <CommandUIHandlers>
         <CommandUIHandler Command="EnableCustomGroup" />
         <CommandUIHandler Command="CustomButtonCommand1"
           CommandAction="javascript:alert('Hello, world!');" />
       </CommandUIHandlers>
     </CommandUIExtension>
   </CustomAction>
 </Elements>
Loading comments…