Nintex Forms – Starting a Workflow and Waiting

For a while, I’ve been meaning to write some JavaScript that would allow me to kick off a Nintex Workflow from a Nintex Form.  So I had some time this morning and put it together.

Not only does it start a workflow, but it sits and waits for it to finish and updates a label to let a user know what is happening.

The video below explains it all.

There are a number of scenarios where could be useful.  Sometimes, you need to perform some complex business process that Nintex Workflow is better suited for.  Kicking off a workflow to do the hard work for you is on way of doing it.  Building a web service that does it and calling that through JS is another option.  But the email here it so provide a low-code solution. 

I should point out, that this is not going to make for the best user experience.  Workflows can take time to run.  Especially in my example in the video, where we are starting a child workflow from a parent workflow.  This means that the user filling a form will be sitting and waiting for that to complete, while not a lot is happening on the form.  So if you do plan on putting this type of logic into your form, make sure you having something happening on the form, letting the user know that we are still waiting.

Even better, if you pass information (like a unique ID) to a workflow and have it create/update an item and store that ID, a user can come back to the form later and it should be able to pick up where you left off.

What does the JavaScript look like?

var varWorkflowStatusColumnInternalName = ‘ParentCo’;
var varWorkflowName = ‘Parent Country Workflow’;

function fnStartWorkflow()
{
var soapEnv =
        “<soap:Envelope xmlns:xsi=’http://www.w3.org/2001/XMLSchema-instance’ xmlns:xsd=’http://www.w3.org/2001/XMLSchema’ xmlns:soap=’http://schemas.xmlsoap.org/soap/envelope/’> \
  <soap:Body> \
    <StartWorkflowOnListItem xmlns=’http://nintex.com’> \
      <itemId>ID</itemId> \
      <listName>List Name</listName> \
      <workflowName>” + varWorkflowName + “</workflowName> \
      <associationData></associationData> \
    </StartWorkflowOnListItem> \
  </soap:Body> \
</soap:Envelope>”;    
  NWF$.ajax({
        beforeSend: function (request)
        {
          request.setRequestHeader(“SOAPAction”, “http://nintex.com/StartWorkflowOnListItem”);
        },
        url: “Site URL/_vti_bin/NintexWorkflow/Workflow.asmx”,
        type: “POST”,
        dataType: “xml”,
        data: soapEnv,
        complete: processResultStartWorkflow,
        contentType: “text/xml; charset=\”utf-8\””,
        error: function (xhr, ajaxOptions, thrownError)
        {
          alert(xhr.status);
          alert(thrownError);
        }
  });
}

var varCheckWorkflowProgressTimer = 0;
var counter = 0;

function processResultStartWorkflow(xData, status) {
    // disable the start workflow button
    NWF$(‘.cssStartWorkflowButton’).attr(‘disabled’, true);
    NWF$(‘.cssWorkflowStatusLabel’).text(‘Workflow started’); 
 
    // start a timer to check workflow status every 5 seconds
    varCheckWorkflowProgressTimer = setInterval(fnCheckWorkflowStatus, 5000);
}

function fnCheckWorkflowStatus()
{
var soapEnv =
        “<soap:Envelope xmlns:xsi=’http://www.w3.org/2001/XMLSchema-instance’ xmlns:xsd=’http://www.w3.org/2001/XMLSchema’ xmlns:soap=’http://schemas.xmlsoap.org/soap/envelope/’> \
  <soap:Body> \
    <GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’> \
      <listName>List Name</listName> \
      <viewName></viewName> \
      <query> \
       <Query> \
        <Where> \
          <Eq> \
            <FieldRef Name=’ID’ /> \
            <Value Type=’Counter’>ID</Value> \
          </Eq> \
        </Where> \
       </Query> \
      </query> \
      <viewFields> \
       <ViewFields> \
        <FieldRef Name='” + varWorkflowStatusColumnInternalName + “‘ /> \
       </ViewFields> \
      </viewFields> \
      <rowLimit>1</rowLimit> \
      <queryOptions><QueryOptions/></queryOptions> \
      <webID></webID> \
    </GetListItems> \
  </soap:Body> \
</soap:Envelope>”;   
  NWF$.ajax({
        beforeSend: function (request)
         {
          request.setRequestHeader(“SOAPAction”, “http://schemas.microsoft.com/sharepoint/soap/GetListItems”);
         },
        url: “Site URL/_vti_bin/Lists.asmx”,
        type: “POST”,
        dataType: “xml”,
        data: soapEnv,
        complete: processResultGetListItems,
        contentType: “text/xml; charset=\”utf-8\””,
        error: function (xhr, ajaxOptions, thrownError)
        {
           alert(xhr.status);
           alert(thrownError);
           if(varCheckWorkflowProgressTimer != 0)
             window.clearInterval(varCheckWorkflowProgressTimer);
         }
  });
}
 
function processResultGetListItems(xData, status) {
   var varWorkflowStatus = 0;
    NWF$(xData.responseXML).find(“z\\:row”).each(function() {
        varWorkflowStatus = NWF$(this).attr(“ows_ParentCo”);
    });

    if(varWorkflowStatus == 2)
    {
      NWF$(‘.cssWorkflowStatusLabel’).text(‘In progress’); 
    }
    else if(varWorkflowStatus == 5)
    {
      NWF$(‘.cssWorkflowStatusLabel’).text(‘Workflow completed’); 
      window.clearInterval(varCheckWorkflowProgressTimer);
    }
    else
    {
      NWF$(‘.cssWorkflowStatusLabel’).text(‘Unknown status’); 
      //window.clearInterval(varCheckWorkflowProgressTimer);
    }
}

 function fnCheckWorkflowProgress() {
    alert(‘checking…’);
    counter++;
    if(counter == 3)
      window.clearInterval(varCheckWorkflowProgressTimer);   
}

Why am I showing this code?  Mainly, because I want to scare you :).

No. Actually, the real reason is that I find when I look up ways to do things, it’s nice to have a piece of code on the web page that I can highlight and copy, without having to download and import a file.

I recommend you watch the videos for some of the gotchas that I got caught out with during the implementation of this.  It’s nothing crazy, but it may save you some time.

For the Form Design, here are few things that I did.

1. Added a Panel to the form.  There is a rule which then hides the panel, if we aren’t in Edit Mode.  This is because the JavaScript above will start a workflow on the current item.  There is no Current item in a New item form.

2. In the panel is a Button (set to JavaScript and it runs a fnStartWorkflow function).  I’ve given this button a CSS class, so that my JavaScript can disable that button once it’s pressed.

3. In the panel is also a Label, which also has a CSS class associated with it.  The JavaScript uses this label to notify the user of the state of the workflow.

The Rule looks like this :

Conclusion

I’ll be working on other solution that can incorporate NF and NW.  But if you have ideas, suggestions, comments or questions, please leave them below, in the comments section.

Downloads

Nintex Forms 2013 and Nintex Workflow 2013

Download the Form – Simple start Workflow and Wait – Download and import into the Nintex Forms Designer page