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

  • 14 October 2016
  • 2 replies
  • 15 views

Badge +9

Inspired by the resent posts Alexa, start a Nintex Workflow  by Jason Lee‌, Nintex Workflow Cloud Start by Renai Bell and Start a Nintex Workflow Cloud Workflow from an Amazon IoT Button by Dan 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

193178_pastedImage_2.png

 

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

193179_pastedImage_4.png

 

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

193180_pastedImage_5.png 

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, you 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. 

193181_pastedImage_2.png

Email Received:

193182_pastedImage_3.png

 

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

193183_pastedImage_4.png

 

Email Recevied:

193184_pastedImage_5.png

 

 

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.


2 replies

Userlevel 7
Badge +11

Nice....  What I'd like to see is a motion sensor that sits in the room with the Grange... When it detects motion outside of business hours,  take a photo with a webcam and send a notification to head of security  

Badge +8

Hi ‌,

Good stuff !!

Cheers,

Rick

Reply