HTML5 Graphical Workflow Designer

Graphical Workflow Designer

A laptop computer with a diagram on the screen

FlowWright provides a high performance HTML5 graphical workflow designer and cloud workflow designer to all users.  FlowWright's workflow designer is built using latest HTML5 technologies in order to give the best performance to companies that implement our tool.  The basic structure of the workflow designer is shown below:

FlowWright's graphical workflow designer is similar to any other graphical development tool. The user interface for the designer is divided into logical partitions that are very similar to other tools, so there's no need to learn new skills to use the designer.

The toolbox has over 200+ Workflow Steps/actions that are provided out of the box. If we don't provide one, then build your own custom and step and configure it and use it. Just drag any step from the toolbox to the workflow designer canvas and start building your digital process. By default, the "Start" step is always there at the beginning. 

A diagram of a process with a question mark in the middle.

Once a step is dragged and dropped to the workflow designer canvas, the inputs/properties for the selected step is automatically rendered within the properties window.  Properties window for the decision step looks like this:
A screenshot of a step properties page on a computer

Depending on the step that is selected within the workflow designer canvas, properties or inputs for the step are rendered as shown on the graphic.  As you can see from the graphic, each step has meta data such as name and descriptions; fyi- name is a required field.  The condition to evaluate input requires an expression to evaluate, another required field.


"More Info" also opens up a section to provide logging and documentation for the step, these are optional fields.  As said before, depending on the step, these inputs and controls displayed for the inputs can vary.


Once the step properties are configured and the "Save" button is clicked, properties are saved and automatic step input validation is performed.  If a step has any custom validation built in, custom validation is also performed.
A screenshot of a step properties decision app

The designer also provides a help document for each and every step provided.  Within the properties window, click the "i" icon on the top right corner to access the documentation for the step.


Depending on what's selected on the toolbar, the properties window will display different content and your toolbar will look similar to:
A computer screen shows a flow chart with a question mark in the middle

Menu provides many designer overall functions, the menu functions are also divided into several logical groups. Based on the selections made on the menu, the properties window may display relevant user interface pages. When designing a process, always use the "Save" button to save the overall process back to FlowWright with the changes. Saving the workflow definition will also perform automated validation on the whole design of the process.



The graphical workflow designer is very simple to use and very intuitive. In addition to the functions provided on the toolbar, the designer also supports standard key strokes such as Ctrl + C to copy, Ctrl + P to paste, Ctrl + S to save, and more, refer to the Configuration Manager documentation for the supported key strokes.

A list of keyboard shortcuts on a white background

Even though you are building processes within a web application running inside a web browser, FlowWright's graphical workflow designer is built for performance. This allows for users to process using just a few number of steps of 100s of steps; the designer is able to handle any process that you design. We also recommend following workflow/bpm best practices and building processes that are logical, easy to comprehend and reusable using sub-workflow processes.

A diagram of a supply chain with arrows pointing in different directions.
Share by: