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

Download and install FlexRule Designer from http://download.flexrule.com and in the Samples folder you will see project and libraries for WebComponents.

Flow

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

Toolbox

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.

API

Loading

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

New

// Creates a new flow editor
newFlow()
 
// Creates a new workflow editor
newWorkflow()

Generate Model

// Generates the XML representation of Flow or Workflow
getFlow()
 
// Generates the XML representation of Flow or Workflow layout and displays information
getFlowInfo()

Retrieving Nodes and Transitions

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


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";

Parameters

Visit Signature of rules in web editors using JavaScript

More

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