warwick

Mission Control - External Start with just jQuery, REST and HTML

Blog Post created by warwick on Oct 13, 2016

Inspired by the resent posts Alexa, start a Nintex Workflow  by Jason LeeNintex Workflow Cloud Start by Renai Bell and Start a Nintex Workflow Cloud Workflow from an Amazon IoT Button by Daniel Stoll I wanted to setup my own demo using this new service as an example.

 

There are only two components to this demo:

  • a workflows in Nintex Workflow Cloud setup with External Start
  • a basic html page with a sprinkle of jQuery to post the REST call

 

Scenario

Mission control needs a two button interface to either initiate or abort the launch mission. Launch control will be sent an email with the command from mission control.

 

Workflow with External Start

 

Start Event: External Start  event with a single variable which is passed through of launchcommand

 

Branch Condition: If launchcommand variable = 1 launch email will be sent, if 0 it will abort

 

Get REST URL to post to

Publish the workflow and you will get a URL that contains an authentication token which will return the workflow Swagger specification: <tenantURL>/api/v1/workflow/{workflowid}/swagger.json?token={token}


View the Swagger definition by accessing the above URL in a browser. Take note of the start event variable names in the Swagger specification that you can pass values to via a REST call.

        "parameters": [

          {

            "name": "StartData",

            "required": true,

            "in": "body",

            "schema": {

              "properties": {

                "se_launchcontrol1": {

                  "title": "launchcontrol",

                  "description": "",

                  "type": "string"

                },

 


We need to modify this URL to the following, y
ou must exclude the swagger.json from it:e.g. <tenantURL>/api/v1/workflow/{workflowid}/?token={token}


Your URL should look similar to:

https://nintextenant.workflowcloud.com/api/v1/workflow/4ab2afb5-31c0-4d7b-a04f-00ee3ad1b5c6/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJOV0MiLCJ3b3JrZmxvd0lkIjoiNGFiMmFmYjUtMzFjMC00ZDdiLWEwNGYtMDBlZTNhZDFiNWM2IiwidGVuYW50SWQiOiJuaW50ZXhkZW1vIiwiaWF0IjoxNDczMzkzMjIyfQ.fyNsKK7DxylwIC3vdu8jHhNCfTJ5DUByzD0FLUB-wDk

 

Mission Control Web Page

 

<!DOCTYPE html>
<html>
<head></head>
<body>

<button class="launchbutton" type="button" value="1" onclick="addData(this);"> > WE ARE GOOD TO LAUNCH < </button>
<button class="launchbutton" type="button" value="0" onclick="addData(this);"> *!* ABORT MISSIONS *!*</button>

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
// POST TO NINTEX WORKFLOW CLOUD EXTERNAL START
function addData(valCode){// pass your data in method
console.log("Launch Command Being Sent: " + valCode.value);
var data = {"se_launchcommand1":valCode.value};
     $.ajax({
             type: "POST",
             url: "https://testinstance.workflowcloud.com/api/v1/workflow/08b1bcb2-8278-4dfe-a8b5-765071fa7544/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJOV0MiLCJ3b3JrZmxvd0lkIjoiMDhiMWJjYjItODI3OC00ZGZlLWE4YjUtNzY1MDcxZmE3NTQ0IiwidGVuYW50SWQiOiJiYzMzNWIwNS05ZTU1LTQ3MzAtYjEyYy0xYmZkZDA5NmRiZWYiLCJpYXQiOjE0NzYzMTU4MDd9.Rs2mQrPsNoWDgKjyN9cVj8FXKbtYApltxjxJSMZXYBI",
             data: JSON.stringify(data),// now data come in this function
             contentType: "application/json",
             crossDomain: true,
             dataType: "json",
             success: function (data, status, jqXHR) {
                //Do somthing on success
             },
             error: function (jqXHR, status) {
                 //Do something if fails
                 console.log(jqXHR);
                 //alert('fail: ' + status.code);
             }
          });
    }
</script>

</body>
</html>

Copy the above code into a .html file and the only think you'll need to modify to get the demo working in the URL which we created in the previous setup and replace in the code above.

 

We are set for Launch!

 

Clicking the We are Good to Launch button on the page will call the function and post to endpoint, you can view the response from the service in the console. 

Email Received:

 

Clicking the Abort Mission button on the page will call the same function but pass a different value.

 

Email Recevied:

 

 

Mission Debrief

So it's as simple as that to integrate any web page into Nintex Workflow Cloud external start, be it a user interaction on a page or code calling the function for any number of reasons, the possibilities are endless.

Outcomes