> For the complete documentation index, see [llms.txt](https://docs.advantys.com/workflowgen-administration-module-reference-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.advantys.com/workflowgen-administration-module-reference-guide/workflow.md).

# Workflow

## Process workflow screen (activities list view) <a href="#process-workflow-screen-list-view" id="process-workflow-screen-list-view"></a>

<figure><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/V0Ysbot0VptBA6K3TTBu/wfd_activities_view.png" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th valign="top">Button/Column</th><th valign="top">Remarks</th></tr></thead><tbody><tr><td valign="top"><strong>Button/Column</strong></td><td valign="top"><strong>Remarks</strong></td></tr><tr><td valign="top">New action</td><td valign="top">Opens the <strong>Select an action type</strong> window and then the <strong>Add action</strong> form</td></tr><tr><td valign="top">Refresh</td><td valign="top">Updates the action list</td></tr><tr><td valign="top">Delete</td><td valign="top">Deletes the selected action</td></tr><tr><td valign="top">Order</td><td valign="top">The arrows allow the action display order to be modified within the process workflow</td></tr><tr><td valign="top">Name</td><td valign="top"><p>Action name</p><p></p><p>Click the name to open the <strong>Edit action</strong> panel.</p></td></tr><tr><td valign="top">Description</td><td valign="top">Action description</td></tr><tr><td valign="top">Previous actions</td><td valign="top">Lists actions preceding the current action within the workflow</td></tr><tr><td valign="top">Next actions</td><td valign="top"><p>Lists actions following the current action within the workflow</p><p></p><p>A link displays the <strong>Edit action</strong> form, which lists actions that following the current one. The <strong>Add</strong> link on the <strong>Edit action</strong> form displays the action form in edit mode for each following action.</p></td></tr></tbody></table>

## Process workflow screen (graphical view) <a href="#graphical-view" id="graphical-view"></a>

WorkflowGen features an HTML5 graphical process workflow designer, built on the latest HTML5 and SVG standards. It provides a simple user interface and intuitive behavior for a more fluid design experience and enhanced compatibility with different design environments (such as mobile devices).

<figure><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/vd37yX38daQ7muoV3mEX/wfd_leave_application.png" alt=""><figcaption></figcaption></figure>

### Toolbar

<table data-header-hidden><thead><tr><th align="center" valign="top">Icon</th><th valign="top">Tools</th><th valign="top">Remarks</th></tr></thead><tbody><tr><td align="center" valign="top"><strong>Icon</strong></td><td valign="top"><strong>Tools</strong></td><td valign="top"><strong>Remarks</strong></td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/DHSSt97uqtOlqu9WGJZS/wfd_save.png" alt="" data-size="original"></td><td valign="top">Save the layout</td><td valign="top">Save the current layout of the workflow diagram</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/HPNoBhe4YHS9JeeVNTZA/wfd_print.png" alt="" data-size="original"></td><td valign="top">Print the diagram</td><td valign="top">Print the current diagram</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/fvSJnH89MGVw9GVLN9Nq/wfd_add_participant.png" alt="" data-size="original"></td><td valign="top">Add participant</td><td valign="top">Add a new participant to the process</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/tptB4HXPhm5YGrFADZvh/wfd_add_action.png" alt="" data-size="original"></td><td valign="top">Add action</td><td valign="top">Add a new action to the process</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/yeRLtTF31mrYkQUKMp3i/wfd-designer-synchronization.png" alt=""></td><td valign="top">Add synchronization</td><td valign="top">Add a synchronization action to the process</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/sbkcZAewSVd0hwMcgZwr/wfd-designer-endState.png" alt=""></td><td valign="top">Add end point</td><td valign="top">Add an end point to the process</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/YH7cJUlFWlu0wuVFjsdP/wfd-designer-comment.png" alt=""></td><td valign="top">Add comment</td><td valign="top">Add a comment to the process</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/TY8DAnxCFW7UTDymrRoi/wfd-designer-text.png" alt=""></td><td valign="top">Add text</td><td valign="top">Add text to the process</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/kzUedDd3dXCJc9WPrVAz/wfd_breakpoint.png" alt="" data-size="original"></td><td valign="top">Add break points</td><td valign="top">Add break points to transitions</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/2igvByC1GCuayA4CR3WZ/wfd_auto_positioning.png" alt="" data-size="original"></td><td valign="top">Choose auto positioning mode</td><td valign="top">Switch between auto and manual positioning mode for the transition anchors</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/ZRbb0I6xTwrfzr10bKi2/wfd-designer-view-assignment-mode.png" alt=""></td><td valign="top">Show assignment methods</td><td valign="top">Show assignment methods on actions</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/CpwZ9Wa2J98i4zFfvWkr/wfd_vert_swimlanes.png" alt="" data-size="original"></td><td valign="top">Display vertical swimlanes</td><td valign="top">Add a vertical swim lane overlay on the graphical view with actions displayed in the participant columns</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/RvPLev99buaHI4uhvquF/wfd_horiz_swimlanes.png" alt="" data-size="original"></td><td valign="top">Display horizontal swimlanes</td><td valign="top">Add a horizontal swim lane overlay on the graphical view with actions displayed in the participant rows</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/ombYUXTEGHYhpdE5K1HK/wfd_vert_panels.png" alt="" data-size="original"></td><td valign="top">Display vertical panels</td><td valign="top">Add a vertical panel overlay on the graphical view with actions displayed in the participant columns</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/nD1yPfpwf7vJfZNSgdj8/wfd_horiz_panels.png" alt="" data-size="original"></td><td valign="top">Display horizontal panels</td><td valign="top">Add a horizontal panel overlay on the graphical view with actions displayed in the participant columns</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/4OK02umamLdW3PROYOVi/wfd_color_picker.png" alt="" data-size="original"></td><td valign="top">Display color picker</td><td valign="top">Display a color picker from which you can choose the swimlane/panel and the background color</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/dXPzaosymSJPDLA3WMui/wfd-designer-zoom-out.png" alt=""></td><td valign="top">Decrease zoom</td><td valign="top">Decrease the zoom scale by 15%</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/EoaEHX0mkIVusQblX2u8/image.png" alt="" data-size="original"></td><td valign="top">Increase zoom</td><td valign="top">Increase the zoom scale by 15%</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/l9ELlnJ8NMQssfr5rZJs/wfd_maximize.png" alt="" data-size="original"></td><td valign="top">Maximize canvas</td><td valign="top">Maximize the canvas size</td></tr><tr><td align="center" valign="top"><img src="https://content.gitbook.com/content/imiOCeaawutpXkzp4fhb/blobs/IpxqZDT4ch9rOQhwqTlc/wfd_restore_size.png" alt="" data-size="original"></td><td valign="top">Restore canvas</td><td valign="top">Restore the default canvas size</td></tr></tbody></table>

## Graphical workflow designer functions

<table data-header-hidden><thead><tr><th valign="top">Function</th><th valign="top">Method</th></tr></thead><tbody><tr><td valign="top"><strong>Function</strong></td><td valign="top"><strong>Method</strong></td></tr><tr><td valign="top">Add an element (action, synchronization, endpoint, comment, text)</td><td valign="top">Drag and drop the element from the toolbar onto the canvas.</td></tr><tr><td valign="top">Delete an element (action, synchronization, endpoint, comment, text)</td><td valign="top">Click the element, then click the <strong><code>x</code></strong> that appears in the top right corner.</td></tr><tr><td valign="top">Add a transition</td><td valign="top">Click the action and click the down arrow, then drag and drop it onto the desired action.</td></tr><tr><td valign="top">Add a transition loop</td><td valign="top">Click the action and click the down arrow, then drag and drop the transition onto the same action.</td></tr><tr><td valign="top">Delete a transition</td><td valign="top">Click the transition, then click the <strong><code>x</code></strong> that appears in the top right corner.</td></tr><tr><td valign="top">Add a condition</td><td valign="top">Double-click the transition.</td></tr><tr><td valign="top">Add more than one condition to a transition</td><td valign="top">You cannot add more than one condition to a single transition. Instead, create a new transition between the actions and add the condition here.</td></tr><tr><td valign="top">Update a condition</td><td valign="top">Double-click the transition or condition.</td></tr><tr><td valign="top">Delete a condition</td><td valign="top">Click the condition, then click the <strong><code>x</code></strong> that appears in the top right corner.</td></tr><tr><td valign="top">Delete a participant</td><td valign="top">Click the participant, then click the <strong><code>x</code></strong> that appears in the top right corner.</td></tr><tr><td valign="top">Auto positioning mode</td><td valign="top">Click the auto positioning mode tool then choose one of the options.</td></tr><tr><td valign="top">Add a breakpoint</td><td valign="top">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.</td></tr><tr><td valign="top">Delete a breakpoint</td><td valign="top">Click the breakpoint, then click the <strong><code>x</code></strong> that appears in the top right corner or press the <strong><code>Delete</code></strong> key (only the selected breakpoint will be deleted). In the case of loop transitions, a minimum of two breakpoints are required.</td></tr><tr><td valign="top">Change the position of a loop transition</td><td valign="top">Change the position of each of the breakpoints so that the transition points to the new position.</td></tr><tr><td valign="top">Change the target/source of a transition</td><td valign="top">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.</td></tr><tr><td valign="top">Change the loop of an action toward another action</td><td valign="top">Click the loop, then change the target and the source toward the other action.</td></tr><tr><td valign="top">Resize swimlanes</td><td valign="top">Click the participant, place the pointer over the border between participants, click the border, then drop it on the new position.</td></tr><tr><td valign="top">Change the order of participants</td><td valign="top">Click the participant, then drag and drop it onto the new position (the orange header indicates the new position of the participant).</td></tr><tr><td valign="top">Associate actions with participants in swimlanes</td><td valign="top">Can be enabled and disabled in the <strong>Workflow</strong> section on the <strong>Administration</strong> tab in the <strong>Configuration</strong> panel.</td></tr><tr><td valign="top">Zoom</td><td valign="top">The zoom percentage is displayed in the top right corner of the workflow.</td></tr></tbody></table>
