Designer:Web Components/Flow

From FlexRule Wiki
Jump to: navigation, search

Flow editor is a web component based on JavaScript and HTML DOM which simply allows you to integrate the authoring experience of Flow and Workflow into your web application. You can apply your own style by overriding its CSS configuration.


Download and install FlexRule Designer from and in the Samples folder you will see project and libraries for WebComponents.


When we talk about Flow, it covers the topic for Workflow as well. Generally workflow is a type of flow that can handle long running business transactions. The Flow editor supports normal Flow as well as Workflow authoring.

FlexRule Flow Editor.png


The editor supports an out-of-the-box toolbox control that allows you users to drag items from it and drop these onto the canvas. It makes it very easy for you as a developer to just show the toolbox and let your users take care of the modeling. The toolbox is divided into different groups of controls. By clicking on each group in the toolbox these expand and collapse.



// Creates the flow or workflow editor from an HTML element
// return: reference to flow or the workflow editor
// Load the flow or workflow content
// content: string content of flow or workflow in XML format


// Creates a new flow editor
// Creates a new workflow editor

Generate Model

// Generates the XML representation of Flow or Workflow
// Generates the XML representation of Flow or Workflow layout and displays information

Retrieving Nodes and Transitions

// Reads the actual model nodes so these can be updated by manipulating the returned JSON objects 
// Finds a node using its unique name in the actual model recursively
// name: a strong name of the node
// Finds a node's transition by its unique name in the actual model recursively
// name: a strong name of the node's transition

Updating Node

To update a node, simply use 'findNode' to find a node and then update the JSON object.

Attributes in the JSON object start with '_'

The code below would update the expression attribute of a node:

flow.loadFlow(flowXml, flowHelper);
var node = flow.findNode("Assign1");
node._expression = "person.Age=25";


Visit Signature of rules in web editors using JavaScript


  1. Decision Table
  2. Natural Language
  3. Flow and Workflow