Multi Step External Form (javascript)

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

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 the external form and retrieve data from the external form.

 

Example

To start this example you will need to Download the following: External Form used for this tutorial can be downloaded from here: MultistepFormJavascript

In this example, we are going to interact with an external multi-step form from our flow using External Form step. The key point of this example is that the external form is written wizard-like using javascript. In other words, it does not call back to Decisions until it is submitted to do so. And when all the steps of the form are completed it calls back to our Flow and sends back data from all its steps.

 

We begin by clicking Create Flow from our Designer Folder’s Actions menu.

 

Next, we name our Flow and click Create to continue…

 

 

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

 

Next, locate Service Definition options for our External Form step and click Add New link to add new Service Outcome.

Name our Service Outcome and define all the Parameters that we are expecting from our External Form to come back. In this case, we define 11 parameters of type String.

 

 

Next, locate Url option for the External Form Step. Input the Url address to your form into the value box.

Mention that there is a View Integration Detail link for the External Form step. Located on the orange action bar at the top of the Flow Designer. On this page select the Show Service API button and you can inspect and learn about our External Form step’s communication ways with external form.

 

 

 

 

Connect our steps as follow to complete our Flow. Next, click Debug Flow link to test our flow.

The flow starts and our external form opens in a new window… We fill out its first step and click Next to proceed to its second step…

Mention, that the form is on the second step and our flow is still waiting on the callback… Fill out the second page of our form and click Next.

Fill out the last page and click Submit to submit the form and initiate a contact back with our flow…

Submit button in our Multistep External Form triggers a function that builds a New URL including all data provided by the user at each step of this form. Next, this function redirects the user back to Decisions using this New URL. Decisions receive all data from the New URL and then store it in the variables we provided for External Form Outcome Path. This function in the External Form is implemented as follows:

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

 

Our flow starts running again until the end. We can see that it ran with no errors. If we look at the Data tab in our Debugger and navigate to the Outcome step we can see that our external form sent us back data from all three pages.

 

Note: This will not work in a cross-domain environment. For example, if Portal Base URL in the format [machine name]/decisions/Primary and we try to call Form on localhost.1

 

Additional Resources