Skip to main content

Cloud

Ways and Locations to add a custom action to a Ribbon in SharePoint 2010 using Code.

To add a button to the ribbon in SharePoint 2010 we use the SPUserCustomAction class.

  1. Get hold of the SPList object whose ribbon you want to customize.
  2. Access the UserCustomActions property and create a new instance of the SPUserCustomAction class.
  3. Set the appropriate properties of the new instance.
  4. Call update on the SPUserCustomAction instance.

There are different locations where the button will be added depending on the properties being set.

If you don’t set the CommandUIExtension property then the button gets added to the toolbar.

image

If you set the CommandUIExtension property the button shows up on the ribbon. The size of the button depends on the TemplateAlias attribute of the xml.

image

To set the CommandUIExtension property, an xml snippet needs to be created. Here is an example of the xml

<CommandUIExtension>
  <CommandUIDefinitions>
    <CommandUIDefinition
    Location='Ribbon.Library.Actions.Controls._children'>
      <Button Id='Ribbon.Library.Actions.NewRibbonButton'
      Command='NewRibbonButtonCommand'
      Image16by16='/_layouts/images/FILMSTRP.GIF'
      Image32by32='/_layouts/images/PPEOPLE.GIF'
      LabelText='Move Document'
      TemplateAlias='o2' />
    </CommandUIDefinition>
  </CommandUIDefinitions>
  <CommandUIHandlers>
    <CommandUIHandler
    Command='NewRibbonButtonCommand'
    CommandScript='javascript:alert('This is a new button!');' />
  </CommandUIHandlers>
</CommandUIExtension>
 

The TemplateAlias attribute in the xml defines how the button looks on the ribbon. Setting it to “o1” would use the 32×32 icon and setting it to “o2” would use the 16×16 icon.

Here is a code snippet.

 using (SPSite site = new SPSite("http://moss2010base:10522"))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPList list = web.Lists["test"];
                    SPUserCustomAction btnCustomRibbon =  list.UserCustomActions.Add();
                    btnCustomRibbon.CommandUIExtension = @"<CommandUIExtension>
  <CommandUIDefinitions>
    <CommandUIDefinition
    Location='Ribbon.Library.Actions.Controls._children'>
      <Button Id='Ribbon.Library.Actions.NewRibbonButton'
      Command='NewRibbonButtonCommand'
      Image16by16='/_layouts/images/FILMSTRP.GIF'
      Image32by32='/_layouts/images/PPEOPLE.GIF'
      LabelText='Move Document'
      TemplateAlias='o2' />
    </CommandUIDefinition>
  </CommandUIDefinitions>
  <CommandUIHandlers>
    <CommandUIHandler
    Command='NewRibbonButtonCommand'
    CommandScript='javascript:alert('This is a new button!');' />
  </CommandUIHandlers>
</CommandUIExtension>";
                    btnCustomRibbon.Name = "MoveDocument";
                    btnCustomRibbon.RegistrationType = SPUserCustomActionRegistrationType.List;
                    btnCustomRibbon.Title = "Move Document";
                    btnCustomRibbon.Location = Microsoft.SharePoint.WebControls.SPRibbon.CustomCommandsId;
                    btnCustomRibbon.Update();
                    list.Update();
                }
            }

.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode, .ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode pre
{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode pre
{margin:0em;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode .rem
{color:#008000;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode .kwrd
{color:#0000ff;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode .str
{color:#006080;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode .op
{color:#0000c0;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode .preproc
{color:#cc6633;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode .asp
{background-color:#ffff00;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode .html
{color:#800000;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode .attr
{color:#ff0000;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode .alt
{background-color:#f4f4f4;width:100%;margin:0em;}
.ExternalClassDF6EA0AE288645DAAAE2D82F8DBD8918 .csharpcode .lnum
{color:#606060;}

The locations strings are defined in the SPRibbon class defined in the Microsoft.SharePoint.WebControls namespace.

This snippet will create the button on the ribbon. I will update the code snippet with a few changes to enhance the code.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Amol Ajgaonkar

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram