Workflow

Process workflow screen (list view)

Actions list view

Click the List link to see this view.

Button / Column	Remarks
New action	Opens the Select an action type window and then the Add action form
Refresh	Updates the action list
Delete	Deletes the selected action
Order	The arrows allow the action display order to be modified within the process workflow
Name	Action name A link displays the action form in edit mode. The Add link on the Edit action screen displays a blank action form to add new Help data)
Description	Action description
Previous actions	Lists actions preceding the current action within the workflow
Next actions	Lists actions following the current action within the workflow A link displays the Edit action form, which lists actions that following the current one. The Add link on the Edit action form displays the action form in edit mode for each following action.

HTML5 graphical process workflow designer

WorkflowGen features an HTML5 graphical process workflow designer, built on the latest HTML5 and SVG standards, with a simpler user interface and improved behavior for a more fluid design experience. It also provides greater compatibility with different design environments (such as mobile devices) that might not support Flash, which was the mode used in previous versions of WorkflowGen.

Process workflow screen (graphical view)

Actions graphical view

Click the Graphical link to see this view.

Icon	Tools	Remarks
	Save the layout	Save the current layout of the workflow diagram
	Print the diagram	Print the current diagram
	Add participant	Add a new participant to the process
	Add action	Add a new action to the process
	Add synchronization	Add a synchronization action to the process
	Add end point	Add an end point to the process
	Add comment	Add a comment to the process
	Add text	Add text to the process
	Add break points	Add break points to transitions
	Choose auto positioning mode	Switch between auto and manual positioning mode for the transition anchors
	Show assignment methods	Show assignment methods on actions
	Display vertical swimlanes	Add a vertical swim lane overlay on the graphical view with actions displayed in the participant columns
	Display horizontal swimlanes	Add a horizontal swim lane overlay on the graphical view with actions displayed in the participant rows
	Display vertical panels	Add a vertical panel overlay on the graphical view with actions displayed in the participant columns
	Display horizontal panels	Add a horizontal panel overlay on the graphical view with actions displayed in the participant columns
	Display color picker	Display a color picker from which you can choose the swimlane/panel and the background color
	Decrease zoom	Decrease the zoom scale by 15%
	Increase zoom	Increase the zoom scale by 15%
	Maximize canvas	Maximizes the canvas size
	Return to default canvas size	Returns to the default canvas size

Graphical workflow designer functions

Function	Method
Add an element (action, synchronization, endpoint, comment, text)	Drag and drop the element from the toolbar onto the canvas.
Delete an element (action, synchronization, endpoint, comment, text)	Click the element, then click the x that appears in the top right corner.
Add a transition	Click the action and click the down arrow, then drag and drop it onto the desired action.
Add a transition loop	Click the action and click the down arrow, then drag and drop the transition onto the same action.
Delete a transition	Click the transition, then click the x that appears in the top right corner.
Add a condition	Double-click the transition.
Add more than one condition to a transition	You cannot add more than one condition to a single transition. Instead, create a new transition between the actions and add the condition here.
Update a condition	Double-click the transition or condition.
Delete a condition	Click the condition, then click the x that appears in the top right corner.
Delete a participant	Click the participant, then click the x that appears in the top right corner.
Auto positioning mode	Click the auto positioning mode tool then choose one of the options.
Add a breakpoint	Click the add breakpoint tool then click the transition (breakpoints will be created individually). As well, clicking the breakpoint tool will show all of the existing breakpoints.
Delete a breakpoint	Click the breakpoint, then click the x that appears in the top right corner or press the DELETE key (only the selected breakpoint will be deleted). In the case of loop transitions, a minimum of two breakpoints are required.
Change the position of a loop transition	Change the position of each of the breakpoints so that the transition points to the new position.
Change the target/source of a transition	Click the transition, hover over the target/source of a transition until the hand pointer appears, then drag and drop the target/source onto another action.
Change the loop of an action toward another action	Click the loop, then change the target and the source toward the other action.
Resize swimlanes	Click the participant, place the pointer over the border between participants, click the border, then drop it on the new position.
Change the order of participants	Click the participant, then drag and drop it onto the new position (the orange header indicates the new position of the participant).
Associate actions with participants in swimlanes	Can be enabled and disabled in the Workflow section on the Administration tab in the Configuration Panel.
Zoom	The zoom percentage is displayed in the top right corner of the workflow.