SharePoint 2010: Add button to Ribbon with SharePoint designer

Sometimes you may need to add buttons to SharePoint 2010 ribbon. You can take one of two approaches: You can write code to add the button. Another approach is to use SharePoint Designer to add button to Ribbon. Today I’ll show you how to add button to Ribbon using SharePoint Designer. However, when you’ll use SharePoint Designer to add button to Ribbon and if you do  so in Development or Staging server, then think about how to do the same in Production server.

Add Button to List/Library forms (AllItems.aspx, DispForm.aspx, EditForm.aspx, NewForm.aspx)

Let’s say you have a list and you want to add a new Ribbon button in the AllItems.aspx page.

1. First open the site in SharePoint Designer.

2. Then click “List and Libraries” link from the left-hand menu and then click the target list from the details page on the right hand side as shown below:

Figure 1: Select List/Libraries in SharePoint Designer

3. Once you click the list name you’ll be landed to the list/library settings page. In this page you can edit four forms (AllItems.aspx, DispForm.aspx, EditForm.aspx and NewForm.aspx) and you can add button to the page’s ribbon. The page is shown below:

 

Figure 2: Four built-in Forms

 

4. From the ‘List Settings’ tab on the top, select ‘Custom Action’ as shown below:

Figure 3: Add custom Action

5. Say you want to add button to ‘NewFom.aspx’. For this click ‘New Form Ribbon’ from the Custom Action. You’ll get the ‘Create Custom Action’ window where you can add custom action to the Ribbon. From the window below you can chose one of three different actions: Navigate to form, Initiate workflow, Navigate to Url. If you need more custom action then SharePoint Designer will not be helpful. You need to write code to extend Ribbon button actions.

Figure 4: Custom Action Properties

 

Find Ribbon Location:

In the List/Library form, the button are placed in groups. As shown in the image below, the new form has three sections:

Figure 5: Buttons are placed in Groups/Sections in form

Now you may want to place your button in a particular group and for that you need know the location id so that you can put the id in the ‘Ribbon Location’ in the custom action properties in SharePoint Designer. Using Firebug extension of Mozilla Firefox, I have found the ribbon location id as shown below:

Figure 6: Ribbon group/section id (detected using Firebug extension of Firefox)

So now you can put the ribbon location id in the custom action properties. For example to put the ‘Show Me’ button in the ‘Commit’ section I have put the ribbon button location to ‘Ribbon.ListForm.Edit.Commit.Controls._children’. Here the ‘.Controls._children’ is added to the ribbon id. The following figure show two windows side by side:

Figure 7: Custom Action windows (On Left) and New Item Form (On right) with ‘Show Me’ button

Decide when to show the Ribbon Button

Sometimes you don’t want to show the button for all users. Rather you want to show for users having a set of permissions. The ‘Rights mask’ option allow us to meet this requirements. The available values can be found on MSDN. You can put more than one values in the Rights Mask text box separated by semicolons as shown below:

Figure 8: Rights mask

 

 

Define Ribbon button sequence in a group

You can determine the ribbon button location in a group/section by setting the ‘sequence number’. I have not found documentation about the sequence number but I have found by myself that each position holds 10. So giving 10 in that filed will show as the first button. Putting any value more than 10 but less than 20 will show as second button and so on.