Adding Custom Actions to the Ribbon UI in SharePoint 2010 Using SharePoint Designer 2010
Guest Author: Geoff Varosky
In my last article, Adding Custom Actions to the List Item Menu in SharePoint 2010 Using SharePoint Designer 2010, We walked through the process of adding custom actions to the List Item Menu using SharePoint Designer 2010, today, we’re going to have a look at the other Custom Action functionality available to us in SharePoint Designer 2010.

This article is going to group the rest of the options within our Custom Actions drop-down in SharePoint Designer 2010 together, as they are all basically doing the same thing, adding an item to the Ribbon UI, just for different forms (View, Edit, New, and Display).
First, let’s open SharePoint Designer 2010 back up. So, let’s go into our 2010 test site, and click on the Edit Site in SharePoint Designer action off of the Site Actions menu.

Now that we have SharePoint Designer open, click on Lists and Libraries, under the Navigation > Site Objects, area on the left-hand side of your window.

Here is a quick little tip while we are here as well, that is new in SharePoint Designer 2010. If you hover your cursor over Lists and Libraries, as well as any of the other Site Objects navigation options, you will see a thumbtack appear on the right.

If you click on this, it will expand your Lists and Libraries, or any of the other options, below the Site Objects on the left-hand side, allowing you 2007-like left-side navigation navigation between your objects.

On with the show… as I mentioned back towards the start of this article, we’re going to look at the remaining Custom Actions we can build into our lists from SharePoint Designer 2010.
Click on any list that you have on the site. In this example, we will be using a tasks list that I had created for demonstration purposes.
Now that we have our Tasks list loaded, we do not want to use the Custom Actions window in the lower-right hand side of our screen. This will automatically create a Custom Action for the List Item Menu if we click on the New… button. No, to create other types of Custom Actions, we need to use the Custom Action menu in the Ribbon UI to do what we are looking to do.

You will however notice, that by clicking here, the Ribbon context at the top of the screen changes from the List Settings ribbon, to the Custom Actions ribbon.

We are going to use the Custom Actions ribbon to create our first of four custom actions for this article. First, we are going to start with the Display Form Ribbon. To start creating one of these, click on the Custom Action button in the ribbon, and select Display Form Ribbon

By doing so, we see the familiar Create Custom Action window pop-up that we saw in my last article on the subject.

For our example, lets fill in a Name, Description, and under the Select Type of Action, we are going to choose Initiate workflow. For this, I just created a simple list-level workflow, which will e-mail the owner of the task, CC’ing the current user, to request them to review and update the task, with a link back to the task (see screenshot below).

Select our workflow from the drop-down next, in this example, our workflow name is Task Review Request.

Next, if we scroll down in our window, we are going to specify a 32×32 image, so that we have a fancy little icon to go with our button. We could sue a 16×16, but, that will be quite small, and since we’re on the ribbon, we want this to stick out a bit. So, I browsed in the layouts folder in the SharePoint root to find an e-mail related icon, and did, at /_layouts/images/centraladmin_systemsettings_email_32×32.png. You could also use the Browse button to find a local image on your computer or network file share to use.

You will also see in the advanced section, that the wizard automatically entered in the Ribbon Location. This location, Ribbon.ListForm.Display.Manage.Controls._children, is great, because, really, were you going to remember that? Here is a listing of what each of these options are:
Form Name
|
Ribbon Location |
Display Form |
Ribbon.ListForm.Display.Manage.Controls._children |
Edit Form |
Ribbon.ListForm.Edit.Actions.Controls._children |
New Form |
Ribbon.ListForm.Edit.Actions.Controls._children |
View Form |
Ribbon.ListItem.Actions.Controls._children |
I have also created a blog post, just with this information, available here, which I will reference in later articles, as needed: SharePoint 2010 Custom Actions – Default Form Ribbon Locations
Now, below there, there is the options for Rights mask. This allows you to assign permissions of who can actually see this custom action. If the user does not meet the requirements, which are comma separated values from the SPBasePermissions class enumeration, they do not see the custom action. We will not apply any currently to this item, leaving it for all to see. But, the option is there.
You can choose your own sequence number for this as well. Generally, the best practice is to use anything over 10,000.
Once we are set with this, lets click on OK on the Custom Action Wizard, and now lets see this in action! Let’s go back to our list in SharePoint… Let’s use the List Item Menu, and select View Item

We will get a modal dialog window now with the Display Form, that we linked our Custom Action to. As you will see, we now have a new icon in our View Ribbon, which shows our fancy little e-mail icon, as well as the title of the Custom Action:

Clicking on this will then initiate the workflow which we associated with the Custom Action

And once we click Start on the workflow initiation form, the workflow will then start! Very cool stuff.

To be sure it is actually doing its thing, let’s check the workflows for that list item, back from the main list page, by selecting the Workflows option from the List Item Menu.

Once the page loads, you will see we have a completed workflow for our Task Review Requestworkflow that we created

To finish up this article, we’re going to add the same Custom Action to the other forms on this site as well. So, back in SharePoint Designer 2010, opened to our list, lets create a new Custom Action for each of the other three forms, and see where they show up.
The only change we are going to make however, for each one, is just in the title. We could have it named the same thing for each form, sure, but, I want to show you where these end up in the SharePoint UI, and to do so, I am doing to insert the name of the form into our Custom Action title.
As you can see, when we choose a different ribbon location for our Custom Action, we get a new Ribbon Location automatically populated for us:

Follow the previous steps in the article if you need to to create these additional actions. When finished, we should have four Custom Actions in total assigned to our list, one for each of the form types:

Now, let’s head back to our our SharePoint site and see where these now appear in the UI.
First – let’s have a look at the List View form ribbon – click on the Items tab under the List Tools ribbon, and you will see a section for Actions. You will also see in here, that our ViewForm Custom Action is available here. What does this allow us to do? Well, using the multiple-item selection functionality in SharePoint 2010, we can run our action against multiple list items!


Well, you would think… but if you attempt to do so, you will get an error, so, only do this on a per-item basis. The functionality is not smart enough to fire up three consecutive workflows by using SharePoint Designer 2010 for each of the items you have selected. It will work fine when going through them one by one.
Next, if we go into the Edit Item view form for one of our tasks

we will see that we have our Custom Action appearing in the Actions area of the form

and the same goes for when we go to create a new Task.

However, until the task is created, you will not be able to run the workflow, as until you hit Save on the new item form, your task does not exist as of yet, so, the workflow has nothing to bind to, just something to keep in mind when creating your Custom Actions in SharePoint Designer 2010. If you do try and run your workflow from your Custom Action – you will get the lovely Runtime Error.

I just wanted to show you where this would appear, and that even though the Edit and New Forms use the same Ribbon Location (Ribbon.ListForm.Edit.Actions.Controls._children), they are actually bound to the individual forms themselves.
I hope this article was informative, and helps shed some light on some of the new functionality available in SharePoint 2010, and SharePoint Designer 2010. Please let me know what you think, or leave any questions regarding this material in the comments, and I will answer them as soon as I can.
Guest Author: Geoff Varosky
Company: Grace-Hunt, LLC.
Blog: http://www.geoffvarosky.com
Twitter: @gvaro
Geoff Varosky (MCP, MCTS) is a Senior Solutions Developer for Grace-Hunt, LLC (http://www.grace-hunt.com), a Microsoft Gold Partner focusing on SharePoint and Dynamics Solutions based out of Hudson, MA. He has been architecting and developing web based applications for over a decade, and has been working with SharePoint Technologies for the past 6 years. Geoff is an active member of the SharePoint community, and speaks regularly at SharePoint events and user groups, and maintains a blog on SharePoint at http://www.geoffvarosky.com.
Options for the Rights Mask (will hide the custom action if current user doesn’t have right) are here
http://www.wssdemo.com/Blog/Lists/Posts/Post.aspx?ID=493
Hello,
I’ve tried this to add a “subscribe!” button on a list with internal educations.
We have a problem because normal users do not seem to have rights to start the workflow.. they need edit rights on the list..
How can I control the rights, to give everybody the ability to start the subscribe workflow, without having to give them edit rights?
Hi,
I have a requirement where I need to show a custom Ribbon menu in the View Form of a certain Document Library. The users will choose multiple items and then will click on my custom Ribbon menu. I need to get those selected items and do some custom action.
May I know how this can be acheived?
Hi Geoff,
I have created two custom actions on the New Form Ribbon, one for each content type available on my list. Now I want to hide the “New Item” menu from the standard ribbon. Is there a way to do this?
You can do this through creating a HideCustomAction element (not available through SharePoint Designer 2010). This would need to be done through visual studio (if you wanted to create a deployable WSP package). You can also manually create a feature for this and deploy it by hand – however, not reccomended.
The HideCustomAction element – http://msdn.microsoft.com/en-us/library/ms414790.aspx
You need to also be able to locate what that custom action is – to do so, you can use this powershells script by Eric Kraus: http://blogs.msdn.com/b/ekraus/archive/2010/05/03/list-all-customactions-in-the-farm.aspx
Also, see comment below for item templates for all CustomAction elements in Visual Studio.
Great post and a useful insight into how this can be done using SharePoint Designer.
Do you have any examples on how this would be done as a feature using Visual Studio 2010 with source code sample.
Thanks
Matt – check out my blog at http://www.sharepointyankee.com. I have lots of examples on custom actions there. I do not have any specifically tailored however for SharePoint 2010. I do some demos in my Creating Custom Actions in SharePoint 2010, however, this has not been recorded anywhere.
I would suggest also looking at cskdev.codeplex.com – this project contains item templates for CustomAction, HideCustomAction, and CustomActionGroup.
Your thoughts…
I am customizing the ribbon’s browse buttons on my site, I want to hide and show the top navigation (’#s4-topheader2′) when a user clicks on Page (to hide) and Browse (to show). The problem is, when I make a jQuery call when clicking on the Page tab, the Browse tab no longer has it’s default link onclick functionality. It is like there is a MS script that changes the class or functionality. So I can hide, but then it does not show again.
Thanks in advance
Geoff,
I noticed customized action item disappears when the list form is customized using InfoPath 2010, how do I keep the customized action item?
Thanks in advance
I have the same problem as Charles? Anyone has an idea on how to fix the custom actions ribbon when using InfoPath forms?
Had this question asked over at my blog yesterday as well, here is what I answered for this:
Infopath forms are separate from regular list forms in SharePoint, and they do not support custom actions. Here is a thread over on TechNet explaining a possible work-around for this.
http://social.technet.microsoft.com/Forums/en-US/sharepoint2010customization/thread/c6afbc48-90cc-4db0-9808-f181c121c7d1/
Reference: http://gvaro.wordpress.com/2010/02/17/adding-custom-actions-to-the-ribbon-ui-in-sharepoint-2010-using-sharepoint-designer-2010/#comment-361
I would like to start a Workflow from the item menu but instead of showing a new form with “start” and “cancel” button, just.. start automatically the workflow…. any idea?
Thanks!
Christian – This is due to the functionality of the workflow. This is manually starting a workflow, which requires the initiation form to be run like that out of the box. If you modified the workflow through Visual Studio, and deploy it that way, then you can basically do whatever you wish, such as skipping the workflow iniation form.
Thinking about this a bit more – and I have not tried this – you could possibly modify the infopath form (XSN) file, and insert some javascript to automatiocally “push” the button for you, thus saving a step.
Hi great article, I had implemented the same thing but I have an issue on the step at
“And once we click Start on the workflow initiation form, the workflow will then start! Very cool stuff.”
When I click start the popup window just stays there and looks like its not doing anything the “processing gif” does not show in FF and IE, but the workflow fired. Why does this happen?
see comment below…
Hello,
i have the same problem as Raymund. The popup /modal dialog does not close.
Also processing gif is not shown.
We are using sharepoint foundation, german. Anybody an idea?
Regards
Marc
I have not personally ran into this issue before – so it could be a number of things, even possibly a known bug. Have you tried searching the SharePoint TechNet Forums?
Sorry for the delay on the responses to all of these comments – found one in my junk mail folder yesterday, my mail cleint has been junking these without my knowledge. Working on the follow up comments now!