Basic External Form Process

Overview

The External Form step was designed in Decisions to interact with Forms by using HTML methods or service calls. This method can also pass data into and retrieves data from an External Form.

This step can be found in the Flow Designer in the Toolbox tab under the Forms [Interaction] category.

Warning

Cross-origin resource sharing requires additional configuration. By default, requests originating from a different domain will be blocked. As a workaround, add an HTTP protocol reference to the web.config using details in this article.

Preparation

Add the following code into a code editor and save it in a new Folder under C:\inetpub\wwwroot as an HTML file.

Adding the wwwroot Folder will require administrative permissions.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <title>Decisions External Form Example</title>
  <link rel="stylesheet" href="css/standardize.css">
  <link rel="stylesheet" href="css/index-grid.css">
  <link rel="stylesheet" href="css/index.css">
  <script language="JavaScript">
	// get the current URL
	var url = window.location.toString();
	//get the parameters
	url.match(/\?(.+)$/);
	var params = RegExp.$1;
	// split up the query string and store in an
	// associative array
	var params = params.split("&");

	var callbackurl = "";
	var stepId = "";
	var flowId = "";
	var otherinputs = "";

	for(var i=0;i<params.length;i++)
	{
		var tmp = params[i];
		if (tmp.indexOf('step') == 0) {
	 		stepId = tmp;
		}
		else if (tmp.indexOf('flow') == 0) {
			flowId = tmp;
		}
		else if (tmp.indexOf('call') == 0) {
			callbackurl = tmp;
		}
		else {
			otherinputs += '<br/>          ' + tmp;
		}
	 }
</script>
<script type="text/javascript">
function btnclick() {
	var redirTo = callbackurl.substring(12) + 
	    	"&" + 
		flowId
		+ "&" 
	      	+ stepId +
		"&OutcomePath=" + document.getElementById('outname').value + "&" +  document.getElementById('extradata').value ;
    alert('clicked ' + redirTo);
    window.location.href = redirTo;

}
</script>
</head>
<body class="body index clearfix">
  <div class="element element-1"></div>
  <p class="text text-1">Decisions External Form Example</p>
  <div class="text text-2">
    <p>This web page is a simple HTML and javascript web page illustrating the use of Decisions flow engine using a completely custom build web</p>
    <p>application to interact with the platform. </p>
</div>
  <div class="element element-2"></div>
  <div class="text text-3">
    <p>The following data were sent to this page from Decisions flow engine:</p>
    <p>     1. <script>document.write(flowId)</script></p>
    <p>     2. <script>document.write(stepId)</script></p>
    <p>     3. <script>document.write(callbackurl)</script></p>
    <p>     Other Parameters:<script>document.write(otherinputs)</script></p>
</div>
  <div class="element element-3"></div>
  <div class="text text-4">
    <p>In order to return to the Decisions flow engine you need to specify an "Outcome" to use in the callback url.  The callback url should be composed </p>
    <p>from the parameters in the list above and must include the following:</p>
    <p>     1. action=PostCustomFormDataToFlow</p>
    <p>     2. flowTrackingId = Use the value shown above</p>
    <p>     3. stepTrackingId = Use the value shown above</p>
    <p>     4. OutcomeName = value</p>
    <p>     5. Additional Data to Send (use name=value&)</p>
    <p></p>
    <p>Specify an outcome and click "Send to Decisions" when ready.</p>
    <p>Outcome Name: <input type="text" id="outname"/>
    <p>Additional Data: <textarea rows=10 id="extradata"></textarea>
    </p>
 
  </div>
 <button class="_button" onclick='btnclick();'>
    	<p>Send to Decisions</p>
    	<p></p>
    </button> 
</body>
</html>

Open the IIS manager. Expand [Desktop Name] > Sites. Right-click Default Web Site and select Add Virtual Directory.

From the Add Virtual Directory window, name the Alias, then select the physical path; this is where the files were saved. Select OK and add the directory.

To avoid potential errors, in the Features View of IIS, double-click Directory Browsing and ensure this feature is enabled.

Create a Flow

In the Flow Designer, add an External Form step from the Forms[Interaction] category drag and drop the step onto the workspace.

At least one Outcome is needed for this step; locate the Service Definition > Service Outcomes section and select Add New.

In the resulting dialog, define the Outcome. For this example, no parameters are required.

Give the Outcome a name and select OK to save and close this dialog.

The Outcome Name is important because the Form needs to know the Outcome path.

Where applicable, Parameters may be added in the form of Data by clicking Add New under the Parameters header.

Input the Form's URL address into Inputs > URL. In this example, the URL is http://localhost/extFormTest1.

The URL will be formatted as http://[PortalBaseUrl]/[insert name of virtual directory].

Debug

In the Flow Designer, select Debug in the top Action Panel. See that the external Form opens in a new window. The Form received flowTracking id, stepTracking id, and CallBackUrl to talk back to the Flow. These parameters were sent to the external Form in the URL.

Provide the outcome path in a specially designed text box and submit the Form. This Outcome Path should match the one that was provided for the Outcome Path from the External Form step in the Flow.

After the Form is submitted, the Flow continues and finishes with no error. Notice the Input/Output Data from the External Form shows parameters that were defined in the code block at the beginning of this example.

Overview

Example

Preparation

Create a Flow

Debug

What's Next