Starting a Workflow from the Welcome Page of a Document Set

Tags: Document Sets, jQuery, SharePoint 2010, SPServices

Special thanks to @iOnline247 and @sympmarc for the advice and tools that made this possible.

I’m in a bit of a sticky situation:  I’m building a solution that involves document sets in SharePoint 2010 and Nintex workflows, but the users I’m building this solution for have zero SharePoint training.  As a result, they are not comfortable using SharePoint’s ribbon to start a workflow.  If they were trained, then kicking off a workflow for a document set wouldn’t be such a problem, but since they’re not, I now need to come up with a way for them to easily do so.  To achieve this goal, I started looking into adding some buttons to the welcome page of each document set so that users can easily start the workflows without having to use the ribbon.  As you might have guessed, in this post I’ll explain how I achieved my goal.

Prerequisites

This post assumes that you know a bit about the following:

The Problem

Users are not comfortable using the ribbon to start a workflow for a document set because they haven’t been trained on how to use SharePoint 2010.

The Goal

Give users an extremely easy way to start a workflow from the welcome page of a document set.

The Setup

In this section, I’ll walk you through a sample of my setup so that you can reproduce this in your own environment if you have some free time.  You know you do.

    1. Create a new content type called “My Document Set” that’s based on the built-in “Document Set” content type.  While you could use the built-in “Document Set” content type itself for this exercise, I recommend against it in case you need to start over or you’re already using it somewhere.  I also like to keep my content types in their own group so I can easily find them later.
      image

    1. Add the “My Document Set” content type to a document library.  There’s no need to add the other content types.

    1. Create a new “My Document Set” in the document library called “Absence Forms.”

image

image


    1. Upon creation, you’ll see the default welcome page of your Absence Forms document set.
      image

    1. Create a couple of documents in the “Absence Forms” document set.  These are just Word documents in my example.
      image

Now that we’ve got a document set with some content in it, let’s move on to the fun stuff.

The Workflow

In my example, I’m working with a Nintex workflow that’s defined as a reusable template in the site collection and I’ve already associated it with my “My Document Set” content type.  The workflow only sends an email notification and doesn’t do anything fancy.  The important part of this workflow is its name:  “Send Email Notification.”

The “Send Email Notification” Workflow

image

The Solution - Starting the Workflow from the Welcome Page of the Document Set

At this point, I went to the “My Document Set” content type’s “Document Set Settings” and clicked the link to “Customize the Welcome Page.”  I edited the page, added a new Content Editor Web Part, and pasted the following code in the HTML source code editor:

   1:  <script src="/scripts/jquery-1.8.3.min.js" type="text/javascript"></script>

   2:  <script src="/scripts/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>

   3:  <script type="text/javascript">

   4:  ExecuteOrDelayUntilScriptLoaded(getWebProperties, "sp.js");

   5:       var relativeUrl;

   6:       function getWebProperties() {

   7:           var ctx = new SP.ClientContext.get_current();

   8:           this.web = ctx.get_web();

   9:           ctx.load(this.web, 'Title', 'Id', 'Created', 'ServerRelativeUrl');

  10:           ctx.executeQueryAsync(Function.createDelegate(this, this.onSuccess),

  11:           Function.createDelegate(this, this.onFail));

  12:       }

  13:       function onSuccess(sender, args) {

  14:           relativeUrl = this.web.get_serverRelativeUrl();

  15:       }

  16:       function onFail(sender, args) {

  17:           alert('failed to get list. Error:' + args.get_message());

  18:       }

  19:      function getSharePointListGUID(){

  20:          var listGUID = SP.ListOperation.Selection.getSelectedList();

  21:          return listGUID;

  22:      }

  23:      function getQSParameterByName(name) {

  24:          var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);

  25:          return match && decodeURIComponent(match[1].replace(/\+/g, ' '));

  26:      }

  27:      function startBLApprovalWorkflow() {

  28:          var goTo = getQSParameterByName("ID");

  29:          var workflowURL = "";

  30:          var item = "";

  31:          var template = "";

  32:          var siteRoot = "";

  33:          var listGUID = getSharePointListGUID();

  34:          siteRoot = $().SPServices.SPGetCurrentSite();

  35:              itemRelativeUrl = getQSParameterByName("RootFolder");

  36:          item = siteRoot.replace(relativeUrl,"") + itemRelativeUrl;

  37:          $().SPServices({

  38:              operation: "GetTemplatesForItem",

  39:              item: item,

  40:              async: false,

  41:              completefunc: function (xData, Status) {

  42:                  $(xData.responseXML).find("WorkflowTemplates > WorkflowTemplate").each(function(i,e)

  43:                  {

  44:                      if ( $(this).attr("Name") == "Send Email Notification" ) {              

  45:                          var guid = $(this).find("WorkflowTemplateIdSet").attr("TemplateId");       

  46:                          if ( guid != null ) {

  47:                              template = "{" + guid + "}";

  48:                          }

  49:                      }

  50:                  });

  51:              }

  52:          });

  53:          workflowURL = siteRoot + "/_layouts/NintexWorkflow/StartWorkflow.aspx?List=" + listGUID +

  54:          "&ID=" + goTo +"&TemplateID=" + template;

  55:          window.location.href = workflowURL;

  56:      }

  57:  </script>

  58:  <div id="divStartWorkflow"><input id="bStartWorkflow" onclick="startBLApprovalWorkflow();"

  59:  type="button" value="Send Email Notification"/>

  60:  </div>

Upon saving my edit and updating all the content types using this welcome page, the welcome page of my “Absence Forms” document set looks like this:

image

Clicking the button yields takes me right to the workflow’s initiation page:

image

Just click the “Start” button now and life is good!  Problem solved!  Folks now have an easy way to kick off a workflow from the home page of the document set.

The Caveat/Risk

If you review the code snippet above on line 44, you can see that the name of the workflow is actually hard-coded here.  So, if the name of the workflow changes, the button fails to work.  Of course, the name of the workflow would rarely change, so this is usually an acceptable way to go about it.