External Forms That Need Data From Decisions (javascript simple)
  • Updated on 08 Aug 2014
  • 4 minutes to read
  • Print
  • Dark
    Light

External Forms That Need Data From Decisions (javascript simple)

  • Print
  • Dark
    Light

Overview

TheExternal 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 the external form and retrieve data from the external form.
This document applies only to 5.0 versions.

Example

In this example, we are going to pass data from Decisions to external form using POST method. We will use two external forms. One for receiving information from the user and second for displaying this information.
We begin by creating New Flow in the Designer Folder .
create-flow-11.jpg

Next, we Name our Flow and click Create to proceed to the Flow Designer .
create-a-flow.jpg

In the Flow Designer navigate to the Steps Tab locate External Form , choose, Forms [Interaction], drag and drop step into Designer Studio.
external-form-676.jpg

Next, we define our first Form's URL and create a new Service Outcome from our form. We name the outcome and define the parameters that we are expecting from this form. In this example, we are expecting 5 strings: Name, Company, Email, Phone, and Comment .
add-new1.jpg

Name the URL
url-name.jpg

SelectAdd New to define the 5 strings.
add-new-5.jpg

Next, drag and drop the second External Form step to our workspace. We connect the outcome from the first form to this step. Use the data from the first form to pass to the second form.
External-F.jpg

In the Properties Tab, under inputs define the Url
2-url.jpg

Next, in Expose Data On Service section, we define the inputs to our second form that are going to be passed in from the first form... They are 5 strings: Name, Company, Email, Phone, and Comment.
External-form-2.jpg

Finally, we Add New service outcome for the second form. In this example, we provide the outcome with just name with no outcome Parameters ...
new.jpg

2018-08-13_120636.jpg

We connect the steps as follow to complete our flow and click Debug Flow link to test our Flow...
Now that the flow is complete, we need to run the flow. You can do this either by selecting Debug in the Flow Designer , or you can close the Flow Designer , right click on the Flow, and select Run Flow.
debug.jpg

The first Form opens in a new window... We fill it up and submit it...
local-host-company.jpg

When we click the Submit button in our External Form it triggers the function in our form that was designed to build new URL with all parameters the user provided. Next, it redirects the user to this New URL causing the Flow to continue its execution using Data that was received from the External Form. This function in the External Form implemented as following:

 <script type="text/javascript">
        function btnclick() {
            var redirTo = callbackurl.substring(12) +
                    "&" +
                    flowId
                    + "&"
                    + stepId +
                    "&OutcomePath=ContactFormOutcome" + "&Name=" +  document.getElementById('name').value +
                    "&Company=" +  document.getElementById('company').value +
                    "&Email=" +  document.getElementById('email').value +
                    "&Phone=" + document.getElementById('phone').value +
                    "&Comment=" + document.getElementById('comment').value;
            alert('clicked ' + redirTo);
            window.location.href = redirTo;
        }
    </script>

In the previous piece of code variables callbackurl, flowId andstepId were initialized using Data that was sent to our External Form from the Flow in URL:

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

When we send our Data back from Decisions to our second External Form it's being sent in the URL as Key-Value pairs. In the second External form we can implement a simple function to search for a desired key and get its value from the URL we received from Decisions:

 <script type="text/javascript">
    var GET = {};
    var query = window.location.search.substring(1).split("&");
    for (var i = 0, max = query.length; i < max; i++)
    {
    if (query[i] === "")
    continue;

    var param = query[i].split("=");
    GET[decodeURIComponent(param[0])] = decodeURIComponent(param[1] || "");
    }
   </script>

This function can be called in our Form to fill out the desirable field with Data that we received from Decisions:

 <label>Name:</label><script>document.write(GET.Name)</script>


In the previous block of HTML code, we fill out Name field with a value that we received in the URL from Decisions using simple javascript described before. 
After we submitted the First form It called back to Decisions and returned data in the outcome... This data was passed into the Second Form and displayed as a result... When we click Done in the second form it calls back to Decisions again and finishes the flow. We can see that the flow was completed with no errors.
test-run.jpg

Note: This will not work on in the cross-domain environment. For example, if Portal Base URL in the format [machine name]/decisions/Primary and we try to call Form on localhost .
First External Form used in this tutorial can be downloaded here: ExternalFormToReturnDataToDecisions
Second External Form used in this tutorial can be downloaded here: Receive Data From Decisions

Was this article helpful?