External Forms That Need Data From Decisions (javascript simple)

Last Updated: 08/13/2018 Introduced in Version: 2.0

Overview

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

We begin by creating New Flow in the Designer Folder.

 

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

 

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

 

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.

Name the URL

 

Select Add New to define the 5 strings.

 

 

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.

 

In the Properties Tab, under inputs define the Url

 

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.

 

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

 

 

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.

 

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

 

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:

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

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

 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.

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

Additional Resources