Simple External Form Process
  • Updated on 07 Aug 2014
  • 3 minutes to read
  • Print
  • Dark
    Light

Simple External Form Process

  • Print
  • Dark
    Light

External Form step was designed in Decisions to interact with forms using html methods or service calls. External Form step could be found in the Flow Designer in the ToolBox under Forms[Interaction] category. This method can also pass data into external form and retrieve data from the external form.
Note: This will not work on in cross domain environment. For example if Portal Base URL in format [machine name]/decisions/Primary and we try to call Form on localhost .

Steps:

  • External Form: Flows, Rules, Forms, and Reports > Forms [Interaction]

Below is a screenshot of the finished External Form Process .

2018-10-17_162619.jpg

Preparation:
External Form used in this tutorial can be downloaded here: ExternalFormTest .
Extract the files to a location on the machine. 
Open ISS manager. Expand [Desktop Name] > Sites > Default Web Service. Name the Alias, then select the physical path (this is where the files were extracted to). Select OK , and begin the example. 
2018-10-18_100658-1.jpg

Configure the Steps:
External Form
From the Flow Designer start-up window under Flows, Rules, Forms and Reports > Forms[Interaction] category select External Form step. Select Add.
At least one outcome is needed for this step. Locate Service Outcomes box under Service Definition and select the Add New link. 
In the resulting dialog define the Outcome . For this example no parameters are required. Simply give the outcome a name and select Ok to save and close this dialog. This outcome name is important because the form needs to know the outcome path name.
This step requires URL of the form that it is going to communicate with. Input the form's URL address into Inputs > URL > Value field.
2018-10-17_163455.jpg

Connect the Pathways and Debug the Flow:
To test the flow select Debug from the top panel of the Flow Designer.
2018-06-27_161501.jpg

We can see that the external form opens in a new window.
2018-10-17_165248.jpg

The form received flowTracking id stepTracking id and CallBackUrl to talk back to our flow. These parameters were sent to our external form in URL. In our external form we use simple javascript code to get these parameters from the URL like following:

 <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/>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;' + tmp;
		}
	 }
</script>

Next, 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.
2018-10-17_165431.jpg

When the form is submitted another function is triggered in the external form that builds a New URL and redirects us to this URL to resume the Flow and send all data to it from the form. This function is implemented like following:

 <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>

After the form is submitted the flow continues and finishes with no error.
Check the Input/Output Data from the External form.
2018-10-17_165624.jpg

Was this article helpful?