Home > SharePoint > Launch SharePoint 2007 workflows from javascript

Launch SharePoint 2007 workflows from javascript


A typical customer request is a personalized menu item on a List or Document Library , for example it was requested to move the current document library item into an hystorical library identical to the first one (deleting the current item) and immediately call the upload page in order to substitute the moved item.

In our sample i have simplified the things, assuming the workflow does not delete the current item: otherwise the original code is a lot more complicated (it is necessary to save some info because at a certain point the current item is “vanished”) and the scope of this post is to show the basic technique.

In this example we works on a Document library named “CEO Documents”, the request is to implement a custom menu item when we are working with the default “All Documents” view , tipically corresponding to AllItems.aspx, but every view page can be customized in this manner.

From Site Actions ->Edit Page i have added an CEWP (Content Editor Web Part) ,clic on Source Editor .

SharePoint 2007 use, as SharePoint 2010, an principal javascript module named core.js that provides entry points for add a custom item menu when the user clic on the List /Document Library item.

For a Document Library this entry point is the Custom_AddDocLibMenuItems function (Custom_AddListMenuItems for a List).

By default in SharePoint 2007 there is not an “out of the box” system for to call an WorkFlow or to access server side functionalities as in SharePoint 2010, but we can use Ajax and the best solution is to use together JQuery and SPServices.

For our luck SPServices provide methods for various tasks , including the workflow call.

After downloading the library place the min.js version into the layouts folder (C:\Program Files\Common Files\microsoft shared\Web Server Extensions\12\TEMPLATE\LAYOUTS)

This is the code:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="_layouts/jquery.SPServices-0.6.2.min.js"></script>
<div id="divSpin">
    <img src="_layouts/images/gears_an.gif" />
<script type="text/javascript">
    window.document.getElementById("divSpin").style.display = "none";
    function Custom_AddDocLibMenuItems(m, ctx) {
        var strImagePath = ctx.imagesPath + "UPDATEPAGEVARIATION.GIF";
        if (currentItemFileUrl == null)
        currentItemFileUrl = GetAttributeFromItemTable(itemTable, "Url", "ServerUrl");
        var strID = GetAttributeFromItemTable(itemTable, "ItemId", "Id");
        // this needs to be customized changing the name of library
        var intPos = currentItemFileUrl.indexOf('/CEODocuments/');
        var strItemUrl = ctx.HttpRoot + currentItemFileUrl.substring(intPos) ;
        // Add menu item
        CAMOpt(m, "Substitute" , "callWf_110921(" + strID + ", '" + strItemUrl + "','{3ca48ed5-e4aa-49da-a5bc-2b7d398e7edd}');" , strImagePath);
        // add a separator to the menu; warning: if the wf is modified the above guid must be updated
        return false;
    function callWf_110921(id, itemURL, templateId){
        // above: test to verify if jquery & SPServices are working
        var boolAns = window.confirm("Are you sure to substitute the current document moving it into CEO Documents archive ?")
        if (!boolAns)
        window.document.getElementById("divSpin").style.display = 'block';
            operation: "StartWorkflow",
            item: itemURL,
            debug: true,
            templateId: templateId,
            workflowParameters: "<root />",
            completefunc: function(xData, status) {
               window.document.getElementById("divSpin").style.display = 'none';
               if(status != "error"){
                  window.alert("Current item successfully moved in CEO Documents archive. please upload the correct document in substitution.");
                  window.location.href = window.location.href;// execute page reload without confirmations from user
                  if (xData.responseXML != undefined)
                     window.alert("Error. call assistance, probably the workflow was changed and has another GUID.");

In divSpin we provide an ajax spinning image (the sharepoint default spin image) so we can provide to the user a feedback that something is working, that by default is not visible. Could be useful even to lock the interface.

In AddDocLibMenuItems we obtain the id of the current item with the SharePoint function (is in core.js) GetAttributeFromItemTable, and the current Item file Url .

In CAMOpt call we define the new item , that has a “Substitute” caption, use the UPDATEPAGEVARIATION.GIF image as icon.

In this call we note an GUID: this is the workflow guid.

It is necessary to pass the GUID and not the workflow name: this has the drawback that when we modify a workflow (in this sample we are using a simple SharePoint Designer Workflow) this GUID changes, so when the workflow is modified is necessary to review all customized code that call this workflow from javascript.

A solution could be to create a custom web service (a future post…) that for a given workflow name get the current GUID; in every case we can provide an alert as in the example.

Where to read this GUID: simple, on the document library or list right clic on a Item, choose workflows, pointing to the workflow you can see on the status bar the TemplateID parameter:

For to copy the value right clic on workflow link and choose properties, here you can copy the value in the clipboard from the Address.

Note in the completefunc parameter of the SPServices call the spin image hiding .

Categories: SharePoint
%d bloggers like this: