Multi Step External Form (javascript)

Last Updated: 08/11/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 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.

createFlow

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

nameFlow

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.

flowStarts

 

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.

outcomeThird

 

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

addURLtoForm

Mention that there is a View Integration Detail link for the External Form step. If we click it new window opens. On this page we can inspect and learn about our External Form step’s communication ways with external form.

viewIntegrationLink

 

viewIntegration

 

Connect our steps as follow to complete our Flow. Next, 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

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…

formOpens

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.

secondStepInForm

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

thirdStepForm

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

 

Our flow starts running again to 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…

resultDataCameBack

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

External Form used for this tutorial can be downloaded from here: MultistepFormJavascript

Additional Resources