It always annoyed me that if you want to start a SP2010 workflow manually from the items context menu or the ribbon you are redirected to the page where you have to click yet another button to finally start a workflow.
But there is an better way. With a small script and with the help of the SPServices JavaScript library you can start workflows with just one click.
Please note that jQuery is also required.
Here’s the code that you need:
function startWorkflow(argObj) {
var props = argObj;
if (typeof props.itemId == "undefined") {
alert('Property \'itemId\' missing!');
return;
}
if (typeof properties.workflowName == "undefined") {
alert('Property \'workflowName\' missing!');
return;
}
var url = window.location.protocol + '//' +
window.location.host +
$('table div[id="' + props.itemId + '"]:not(:visible)').attr('url');
var wfGUID;
$().SPServices({
operation: "GetTemplatesForItem",
item: url,
completefunc: function(xData, Status) {
$(xData.responseXML).find("WorkflowTemplate").each(function(i, e) {
if ($(this).attr("Name") == props.workflowName) {
wfGUID='{'$(this).find('WorkflowTemplateIdSet').attr('TemplateId')+'}';
};
});
if (typeof loadingImage != 'undefined') {
var style = "#wfoverlay{" +
"position: absolute;" +
"left: 0;" +
"top: 0;" +
"bottom: 0;" +
"right: 0;" +
"background: #000;" +
"opacity: 0.38;" +
"filter: alpha(opacity=80);" +
"}" +
"#wfloading{" +
"width: 16px;" +
"height: 16px;" +
"position: absolute;" +
"top: 50%;" +
"left: 50%;" +
"margin: -8px 0 0 -8px;" +
"}"
var div = $("<div />", {
html: '­<style>' + style + '</style>'
}).appendTo("body");
var over = '<div id="wfoverlay">' +
'<img id="wfloading" src="' + props.loadingImage + '">' +
'</div>';
$(over).appendTo('body');
};
$().SPServices({
operation: "StartWorkflow",
async: false,
item: url,
templateId: wfGUID,
workflowParameters: "<root />",
completefunc: function(xData, Status) {
$('#startWorkflowOverlay').remove();
if (Status == "error") {
if (typeof props.failMessage != 'undefined') {
alert(props.failMessage);
} else {
alert(Status);
}
} else {
if (typeof props.successMessage != 'undefined') {
alert(props.successMessage);
}
window.location = window.location;
}
}
});
}
});
};
It might be the best to reference this code in your masterpage but if you don’t want to do that then you have the following two options:
1: If you want to start workflows from the items context menu you have to put the code on each page containing the list via a CEWP or SEWP.
2: If you want to start the workflows from the ribbon you have to put the code into the corresponding form via a CEWP or SEWP.
In both cases it would be the best to use the Script Editor Web Part to store the code.
After you have embedded the code into the masterpage, the views or the forms, open up SharePoint Designer and create a custom action for the corresponding list.
Now, instead of selecting ‘Start a workflow’ you put the following code into the URL field:
javascript:
startWorkflow({itemId:{ItemId},
workflowName:'put_workflow-name_here',
successMessage:'Success',
failMessage:'Error',
loadingImage: 'url_of_loading_animation',})
The parameters are as follows:
{ItemId}: SharePoint token which contains the item ID. Don’t change this one!
workflowName: Type the name of the workflow you want to start here.
successMessage: Optional message you want to show when the workflow executed successfully.
failMessage: Optional message you want to show when the workflow executed unsuccessfully.
loadingImage: Url to a loading animation image. You can take the image from the end of this post.
Here’s how it should look like now:
Now, save your custom action. For some reason when you open the custom action again, you will see that the code disappeared. This seems to be a bug in SharePoint Designer, but there’s no need to worry – the code is still saved. You can put a copy of the code in the description field on top, otherwise you have to write it all again when you want to make a change to one of the parameters.
Now go to your list-item and try to start the workflow. While the workflow is starting you will see a loading animation followed by your custom success or error message.
