External Forms That Need Data From Decisions (javascript simple)

Last Updated: 07/20/2016 Introduced in Verision: 2.0

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.

 

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 user and second for displaying this information.

We begin with creating New Flow in the Designer Folder.

 createFlow

Next, we Name our Flow and click Create to proceed to the Flow Designer.

 nameFlow

In the Flow Designer start-up window we select External Form step from Flows, Rules, Forms and Reports > Forms[Interaction] category. Click  Add  to add it to our flow.

 flowStarts

Next, we define our first Form’s Url and create 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.

serviceOutcomesSecond 

Next, we drag to our workspace second External Form step. We connect the outcome from first form to this step… So we are going to use data from the first form to pass to our second form.

 dragSecondExternalForm

We define our second Form’s Url

 defineSecondFormUrl

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.

exposeData 

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

outcome 

We connect the steps as follow to complete our flow and click Debug Flow link 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 Shot

 debugFlow

First Form opens in a new window… We fill it up and submit it…

 firstFormOpensDebug

 

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:

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

 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 desirable key and get its value from the URL we received from Decisions:

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

 In previous block of HTML code we fill out Name field with value that we received in the URL from Decisions using simple javascript described before. 

After we submitted 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.

resultSecondFormOpens

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.

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

Additional Resources