Saturday, June 26, 2010

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:

image

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:

image 

Figure 2: Four built-in Forms

 

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

image

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.

image

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:

image

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:

image

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:

image

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:

image

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.

18 comments:

  1. hy.
    Can you do this in sharepoint designer 2007. i can't find the Custom Action menu in the toolbar, and i think that it doesn't exist in sharepoint designer 2007. Please help me.

    Thank you

    ReplyDelete
  2. SharePoint 2007 doesn't have ribbon control. So the steps in this post will only work for sharepoint 2010.

    ReplyDelete
  3. Nice.
    Thanks for your reply.

    ReplyDelete
  4. Why to find ribbon group using firebug,
    you can go and see all in 14 hive:

    14\TEMPLATE\GLOBAL\XML\CMDUI.xml

    ReplyDelete
  5. Hi, Nice Post.How to get 'Edit Document' link in Editform ribbon butttons?

    ReplyDelete
  6. Hi, nice post. It works when I try it with a default SharePoint list like Links, Tasks and so on.. but now I created a "custom list" and edit the forms via infoPath. When I lookup the ribbon group with firebug I get "Ribbon.Tabs.InfoPathListTab.Commit" etc.. "Ribbon.Tabs.InfoPathListTab" is not defined in CMDUI.xml. I tryed simply to replace the "Ribbon Location" in Designer without success. Can you help me?

    ReplyDelete
  7. Hi Edel,

    When I wrote the post I tried with custom list. so custom list shouldn't be a problem. I'm not sure but is it any problem with infopath editing? Can you plz check?

    ReplyDelete
  8. Hi Sohel Rana,

    I checked InfoPath without success ..
    So what have i done?
    1. I create a new custom list and take a look at the form Ribbon (http://bit.ly/9nVGeR)
    2. Go to List -> List Tools -> List -> Cusomize Forms (When i look at "modify form webparts" it looks like http://bit.ly/9Zb07I)
    3. Button "Customize Forms" and edit via InfoPath only the label "Title" in "SiteTitle" ..nothing else.
    4. Quick publish
    5. Back to List -> List Tools -> List -> Modify form webparts it looks (http://bit.ly/arla4T) - because the created newifs.aspx editifs.aspx?
    - Show all forms in Designer (new, edit, deleteifs.aspx were created) (http://bit.ly/bXCPGY) i don't know why .. is it correct that everytime I touch list-forms with infoPath and publish them, 3 new aspx-files with the suffix "ifs.aspx" are created? Or is there any kind of setting I miss in InfoPath?
    6. look at the new published form and get "Ribbon.Tabs.InfoPathListTab.Commit" .. (http://bit.ly/ajlIM5)

    Any idea ?
    thanks edel

    ReplyDelete
  9. Has anyone found out how to Customized the ribbon on a custom Infopath form?

    ReplyDelete
  10. It seems customizing ribbon in infopath form is not easy. Though I've not worked personally on this but after googling I've come to this conclusion.

    ReplyDelete
  11. Excellent post.
    Thank you.

    ReplyDelete
  12. How to insert javascript?

    ReplyDelete
  13. i'like's. Thx!

    ReplyDelete
  14. nice post, was really useful to me thank you! :-)

    ReplyDelete
  15. Hi.
    Thankyou....I'd like this article.
    So, How could I get the event throwed by this custom button in the my custom webPart?

    ReplyDelete
  16. Nice article... how can we place button after delete item in DispForm.. it is not taking sequence no for this requirement. Help me to solve this issue.
    Thank you.

    ReplyDelete
  17. Thanks! That helped me a lot :-)

    ReplyDelete
  18. Hi,
    I ask you if I can add a custom action to the settings menu and how ?
    I've tried to do same steps in this link : http://sharepointontop.blogspot.com/2013/03/create-custom-action-in-site.html
    but I didn't found my new item and I have a doubt in groupID and urlAction !

    Thanks in advance for your help.
    NB:
    GroupId="SettingsMenuForSurvey"

    ReplyDelete