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

External Forms That Return Data to Decisions (javascript simple)

  • Print
  • Dark
    Light

Overview

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.
This document applies only to 5.0 versions.

Example
In this example we are going to use user's input from External Form to compose and send email from Decisions' Flow .
We begin in our Designer Folder by clicking Create Flow.
createFlow1.png

In the resulting pop-up window we Name our Flow and click Create to proceed to the Flow Designer.
nameFlow1.png

In the Flow Designer start-up window  we locate External Form step under Flows, Rules, Forms and Reports > Forms[Interaction] category select it and click Add to add it to our workspace.
flowStarts28.png

Int the URL options we provide URL to our External Form
providUrlToForm.png

Next, in the Service Outcomes section we click Add New link to create a new outcome from our External Form Step.
addOutcome.png{height ="293" width="767"}
In the resulting pop-up window we name our outcome and create 5 variables in the Parameters box. We are going to store in these parameters data that our External Form returns to us.
Next, we click OK to save and close this pop-up window.
serviceOutcomesSecond.png{height ="698" width="750"}

Next, we drag Send Email step to our workspace from Communication category.
dragSendEmail.png

Now we can connect all our steps. Next, from Send Email 's options we select Show Mapping Editor to configure our Email.
showMappingForEmail.png

In the Mapping Editor we connect Email to From Field , define constant email in the To Field and click Show Editor under Subject Field to edit our subject.
showTextEditorForSubj.png

We define our Subject as follow and click OK to save and continue.
editSubject.png

Back in the Mapping Editor we click Show Editor under Body section to create our Email's body.
showBoduEditor.png

Our body is designed as follow and it is using External Form's outcomes...
When finished we click OK to save and continue...
editBody.png

This completes our Mapping so we can save and close it.
Our flow is completed now so we click Debug Flow from the top panel of the Flow Designer to test our Flow.
Note that in Decisions version 3.5 and above, you'll need to click Test Flow to access the Debugger.
3.5-Test-Flow-Shot1.png

debugFlow1.png

External Form opens in a new window... We fill it up and submit the form.
formOpens1.png

When we click 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>

The flow runs to the end step with no issues. Under the Data tab in the debugger we can check data that were returned from our External Form and sent to our Send Email step.
inputDataToSendEmailStep.png

When we check our Email box we can see new inbox email that should look like this:
result.png

Note: This will not work on in crossdomain environment. For example if Portal Base URL in format [machine name]/decisions/Primary and we try to call Form on localhost .

External Form used in this tutorial can be downloaded from here: ExternalFormToReturnDataToDecisions

Was this article helpful?