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\wwwrootas an HTML file.

Adding to 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 IIS Manager; expand [Desktop Name] > Sites on the left, then right-click Default Web Site and select Add Virtual Directory.

From the Add Virtual Directory window, name the Alias, then provide/select the Physical path from the HTML file is saved. Click OK to add the Directory.

After the Directory is added, double-click Directory Browsing.

To help avoid potential errors, if it is presently disabled, Enable Directory Browsing.

Create a Flow

From the Decisions Studio in a Designer Project, click the CREATE FLOW button on the Global Action Bar; select Flow, provide a Name, then click CREATE.

From the Flow Designer, attach an External Form step from the FORMS [INTERACTION] category of the Toolbox tab, to the Start step.

Navigate to the Form step's Properties; under SERVICE DEFINITION > Service Outcomes, click ADD.

From the Add Service Outcomes window, provide "Done" as input for OUTCOME NAME > Name, then click OK.

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 click ADD under the PARAMETERS header.

Under INPUTS > Url, Constant map the Form's URL.

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

Connect the External Form to the End step, then Save the Flow. If desired, close via X.

Debug

From the Flow Designer, select the Debug link from the top Action.

Click START DEBUGGING.

Once the Flow opens the External Form, note that the Form received the flowTracking id, stepTracking id, and CallBackUrl.

Provide the designated input for the Outcome Name, then click Send to Decisions.

After the Form submits, navigate back to the Debugger, then select External Form 1 > Execution 1 > View Input/Output Data.

Note the resulting Output displays the information received by the Form.

Overview

Example

Preparation

Create a Flow

Debug

What's Next