Today, I will share with you a feature for creating a Ribbon button on a SharePoint server UI. This button will start a SharePoint 2013 workflow when pressed. As a matter of fact, you can achieve this by two different features which actually share many things in common – they are Quick Steps and Custom Actions. I will go with Quick Steps first which provides a more tailored user experience for this goal and then explain Custom Actions briefly.
If you are already used to Custom Actions or Quick Steps to start SharePoint 2010 workflow, then you can just try to create one to start a SharePoint 2013 workflow. Since the UX is, basically, the same, it should be easy for users who have done this before.
First, you need to prepare a Ribbon icon file to show up in the Ribbon for the Quick Step you will define in the following steps. I decided to use the Site Assets document library and uploaded an image file there.
Second, you must have a list or document library you want to create the Quick Step in. In this example, I will use a Vacation Request list and create a quick step which starts a workflow to request an approval for the vacation.
If you used a document library, you can find it under Customize Library group in the LIBRARY Ribbon tab as below.
Clicking the button will lead you to this dialog where you just need to choose Allow.
SPD is then launched with the Vacation Request list shown with the following dialog popped up.
Take some time to explore the UIs on this dialog. You will find that you can create a new workflow based on SharePoint 2013 Workflow or SharePoint 2010 Workflow, or use some existing workflows. You will also notice that you can define the button label and button image. As we will create a new workflow based on SharePoint 2013 Workflow, choose the Start a new workflow option and then choose SharePoint 2013 Workflow as the Platform Type. Type in ‘Vacation Approval’ for the Button Label field. Lastly, click the Browse button to locate the icon image we uploaded in the Preparation section. Your dialog should look like below:
[SC(1]
Once you click OK, a workflow designer for SharePoint 2013 Workflow will be presented as below. Feel free to complete the workflow logic. In this example, as mentioned before, we will create a Vacation Approval workflow.
Once you publish your workflow, you’ve finished creating a new Quick Step. If you go to the ITEMS Ribbon tab, you will find a new Ribbon group Quick Steps is created and a new Ribbon menu Vacation Approval is created as well.
And if you go to the list summary page for the Vacation Request list in SPD, you will find that a workflow named ‘Button – Vacation Approval’ is present and a Custom Action named ‘Vacation Approval’ is created. As a matter of fact, Quick Step is a specific kind of Custom Actions. So if you are familiar with the Custom Actions’ features, you can apply them to your Quick Steps as well.
You can change the name of the button and even update the Quick Step to do a different job such as navigation to some forms or web pages, or starting a different workflow.
And if you scroll down a bit, you can find some advanced settings. If you use the Ribbon Location field and Sequence number field, you can change the location of the Ribbon button.
Let’s say, we want the button to show up in Workflows group rather than in Quick Steps group and want it to show up last in the group. Then you can easily achieve this by modifying the values to followings:
This will make the button show on the targeted location as below.
If you want to know more about the values available in the Ribbon Location, please refer to following article or search for some other blog articles explaining Custom Actions.
http://msdn.microsoft.com/en-us/library/ee537543.aspx
For Rights mask, you can use the values from the below site separated by semicolons to allow only permitted user to see/use the Custom Action.
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spbasepermissions.aspx
To do this, you need to create a new Custom Action of type List Item Menu. You can find the Custom Action Ribbon button in the list summary page for the Vacation Request list in SPD. If you click it, you will be presented with the following options. In this example, please choose List Item Menu.
In the dialog that follows, please choose Initiate workflow option and select the ‘Button – Vacation Approval’ workflow which was created during the creation of Quick Step so that two UIs will start the same workflow. And Click OK.
That’s it. You created the menu. If you go to the Vacation Request list, choose one item, and see the list item menu, you can find it.
If you are already used to Custom Actions or Quick Steps to start SharePoint 2010 workflow, then you can just try to create one to start a SharePoint 2013 workflow. Since the UX is, basically, the same, it should be easy for users who have done this before.
Quick Steps
I will explain in detail how you can create a Quick Step to start a SharePoint 2013 workflow.Preparation
Creating a Quick Step requires some prerequisites.First, you need to prepare a Ribbon icon file to show up in the Ribbon for the Quick Step you will define in the following steps. I decided to use the Site Assets document library and uploaded an image file there.
Second, you must have a list or document library you want to create the Quick Step in. In this example, I will use a Vacation Request list and create a quick step which starts a workflow to request an approval for the vacation.
Create a Quick Step
Now that you have the list to use, it is time to create a Quick Step. It is very easy. Just click the New Quick Step button under Customize List group in LIST Ribbon tab as highlighted below.
If you used a document library, you can find it under Customize Library group in the LIBRARY Ribbon tab as below.
Clicking the button will lead you to this dialog where you just need to choose Allow.
SPD is then launched with the Vacation Request list shown with the following dialog popped up.
Take some time to explore the UIs on this dialog. You will find that you can create a new workflow based on SharePoint 2013 Workflow or SharePoint 2010 Workflow, or use some existing workflows. You will also notice that you can define the button label and button image. As we will create a new workflow based on SharePoint 2013 Workflow, choose the Start a new workflow option and then choose SharePoint 2013 Workflow as the Platform Type. Type in ‘Vacation Approval’ for the Button Label field. Lastly, click the Browse button to locate the icon image we uploaded in the Preparation section. Your dialog should look like below:
[SC(1]Once you click OK, a workflow designer for SharePoint 2013 Workflow will be presented as below. Feel free to complete the workflow logic. In this example, as mentioned before, we will create a Vacation Approval workflow.
Once you publish your workflow, you’ve finished creating a new Quick Step. If you go to the ITEMS Ribbon tab, you will find a new Ribbon group Quick Steps is created and a new Ribbon menu Vacation Approval is created as well.
And if you go to the list summary page for the Vacation Request list in SPD, you will find that a workflow named ‘Button – Vacation Approval’ is present and a Custom Action named ‘Vacation Approval’ is created. As a matter of fact, Quick Step is a specific kind of Custom Actions. So if you are familiar with the Custom Actions’ features, you can apply them to your Quick Steps as well.
Modify Quick Step (Advanced)
As Quick Step is a mixture of Custom Action (‘View Ribbon’ type Custom Actions) and a list workflow, you can apply some Custom Action features to modify the created Quick Step. If you click ‘Vacation Approval’ in the Custom Actions slab, the following dialog will be presented.You can change the name of the button and even update the Quick Step to do a different job such as navigation to some forms or web pages, or starting a different workflow.
And if you scroll down a bit, you can find some advanced settings. If you use the Ribbon Location field and Sequence number field, you can change the location of the Ribbon button.
Let’s say, we want the button to show up in Workflows group rather than in Quick Steps group and want it to show up last in the group. Then you can easily achieve this by modifying the values to followings:
This will make the button show on the targeted location as below.
If you want to know more about the values available in the Ribbon Location, please refer to following article or search for some other blog articles explaining Custom Actions.
http://msdn.microsoft.com/en-us/library/ee537543.aspx
For Rights mask, you can use the values from the below site separated by semicolons to allow only permitted user to see/use the Custom Action.
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spbasepermissions.aspx
Custom Actions
Let’s say now, that after you have a new Ribbon menu to start the Vacation Request workflow, you want a similar menu on the List Item Menu so that users can start a workflow by right-clicking over an item, like below:
To do this, you need to create a new Custom Action of type List Item Menu. You can find the Custom Action Ribbon button in the list summary page for the Vacation Request list in SPD. If you click it, you will be presented with the following options. In this example, please choose List Item Menu.
In the dialog that follows, please choose Initiate workflow option and select the ‘Button – Vacation Approval’ workflow which was created during the creation of Quick Step so that two UIs will start the same workflow. And Click OK.
That’s it. You created the menu. If you go to the Vacation Request list, choose one item, and see the list item menu, you can find it.
Known Issue
There are some known issues for the Quick Steps and Custom Actions feature.- After starting the workflow, it goes to the site default page rather than to the list
- Following option in workflow summary page is turned off by default for the workflow created from Quick Steps
- If you click the New button from the Custom Actions slab, it automatically creates a View Ribbon type Custom Action
No comments:
Post a Comment