Embed Decisions Form in a Web App
  • Updated on 11 Jun 2018
  • 2 minutes to read
  • Print
  • Dark

Embed Decisions Form in a Web App

  • Print
  • Dark


This document shows how to embed a form that’s used to kick off a workflow, or an In Session Form. In another web app this is done by running the form via URL on the Decisions application server. This is usually accomplished with an iFrame, although it's not a requirement.
NOTE: There is a complete HTML example in Appendix A at the bottom of this document for reference.

Beginning the Process

First step is to get the URL. To do this right click the flow within the action menu select Run [Advanced] > Integration > View Integration Details. Another way to do this is within the  Flow Designer select Integration on the top action bar. 

A new tab will open labeled View Integration Details for Flow - Name of Flow . Set up as needed, then select Show Service API .  Copy the URL. 
Use this URL in an iFrame (or similar HTML control) to show the Decisions designed form.  
If the form is part of a wizard and has multiple forms, when the remaining forms load a FormLoadComplete event will populate.  This event allows the ability to resize/style or react to changes in the flow as it moves from form to form.

Finishing the Process

When the workflow is done and there are no more steps, a flowExecutionCompleted page will show. This can be used to stop presenting anything to the user and it requires nothing extra at the end of the flow.  The flows are built and tested in a completely standard fashion.

Alternate Endings

An End Form Session step can be used to redirect the user to a different URL or display a message.  This can send different information back to the hosting application so that you can more dynamically respond to the forms that ran in a workflow.
Integration steps for Messaging Systems/Databases/Services can be created to send a message from the running workflow to the hosting application. It can trigger actions and changes that have nothing to do with what is happening within the hosting container like the iFrame.

Appendix A - Example HTML:

 This is the testing of flow running in the Iframe and a clear example for resizing the frame or closing the frame.

Click the button below to run a flow

<button onclick='javascript: document.getElementById("iframeworkflowchild").style = "display: block;";'>Apply Now</button>
  ![Alt Text](http://localhost/decisions/Primary/H/?FlowId=7ef8e4f3-645f-11e8-9d94-34f64bb288a0&ForceFormat=true&Location=Center&Chrome=Off&Border=True){height ="70%" width="75%"}


// debugger

function onMyFrameLoad(frame) {

// This is the really important bit

// that detects when the flow engine sends

// a flowExecutionCompleted event without any

// special end step at all.

frame.contentWindow.$( "div[id^='formWrapper']").on("flowExecutionCompleted", function(event) {

  // alert("Flow completed!!");

  document.getElementById('iframeworkflowchild').style = 'display: none';


// When second form in set is different size...

// frame needs to resize at that moment.

frame.contentWindow.$(frame.contentWindow.document).on("FormLoadComplete", function(resizeObj) {

if (false === resizeObj.isResized) {

alert("height:"+resizeObj.FormSurfaceElem.height()+ " width:"+resizeObj.FormSurfaceElem.width())





Was this article helpful?