It's now time for a Web-based Flow editor! Drag and drop from a toolbox to build your flow on the Web with a ready-to-use JavaScript web component. Earlier, we introduced Natural Language and Decision Table editor components for the Web. In this post we are going to discuss a Flow editor for Web applications. It is based on JavaScript/HTML and can be added to your application as simply as calling a function. A Flow Web component allows you to model your business logic (i.e., Flow, Workflow, RuleFlow, DataFlow, DecisionFlow, etc.) in a visual way.

Simple Integration

You just need to add the following references:

workflow javascript

Then add a canvas to your page to display any kind of Flow (i.e., Workflow, Orchestration, RuleFlow, DecisionFlow, etc.):

workflow web

Once your page is loaded you use toFlow in your jQuery to build the Flow editor component on your Web page

workflow web

And that's it! You have Flow editor on your Web page, and that allows you to build Flow, Workflow, RuleFlow, DecisionFlow, SubFlow, and so on, with support for complex and nested child nodes and hierarchies.

workflow web

Toolbox

The toolbox is another visual element of this component. It enables users to add new nodes to the diagram using drag and drop.

Drag an item from the toolbox:
workflow web

Then drop it onto your model:
workflow web

Node Editing

You can also edit nodes on the model using your mouse and keyboard:
workflow web

API

  1. Load a Flow
  2. Manage Flow Parameters (input, output and local)
  3. Manipulate the nodes, expressions and rules programmatically
  4. Generate the flow content and helper for the positioning of nodes
  5. Show/Hide Toolbox

More Web Components

This is just one of the Web components we provide. To know more about the remainder, please visit https://www.flexrule.com/javascript

Free Download

Please feel free to download FlexRule Designer Installer. Once you have installed it in the Samples folder, there is a project called “WebEditors\WebSample.sln” which has the sample Website using pure HTML and JavaScript. Open this to find a sample HTML file (index.html). Have a look at that and you know what to do next!

With this Web-based component you can truly allow your users to model their own business rules in your Web application!

Last updated February 14th, 2020 at 03:26 pm, Published December 24th, 2015 at 03:26 pm