Designer panel
Overview
The Designer panel is a graphical workflow editor that provides a visual environment for creating, modifying, and managing workflow process definitions. It becomes active when a user clicks the edit icon from the Home panel. The Designer offers an intuitive drag-and-drop interface for modeling complex workflows with nodes, transitions, and configurable properties.
Panel Layout
The Designer panel is structured with three main areas:
- Top navigation bar: Contains the main menu options (Home, Designer, Users, Tools, Admin)
- Left section: Visual workflow canvas displaying the diagram with nodes and transitions
- Right section: Node and transition properties panel (visible when an element is selected)
Workflow Canvas
The left section provides a graphical workspace for designing and visualizing workflows:
- Graphical representation: Displays workflow nodes and transitions with clear visual connections
- Drag-and-drop interface: Allows easy positioning and organization of workflow elements
- Visual connection lines: Shows the flow between nodes with directional arrows
- Color-coded nodes: Different node types are distinguished by color (green for Start, red for End, blue for Actions, white for Tasks, etc.)
- Document title: Displays in the top-right corner of the canvas area
Canvas Zoom and Navigation Controls
Located in the bottom-left corner of the canvas, a vertical toolbar provides zoom and view management:
| Control | Description |
|---|---|
| Zoom In (+) | Increases the diagram magnification for detailed editing |
| Zoom Out (-) | Decreases the diagram magnification to view more of the workflow |
| Fit Diagram | Automatically adjusts zoom to display the complete workflow within the available canvas area |
| Lock / Unlock | Toggles canvas locking to prevent or allow modification actions |
Bottom Toolbar
A toolbar at the bottom of the canvas provides essential workflow management and navigation features.
Left Side Controls
| Control | Description |
|---|---|
| Fit Diagram | Adjusts the zoom level to fit the entire workflow diagram within the visible canvas area |
| Capture Screenshot | Captures a screenshot of the currently visible portion of the workflow diagram |
| Stop Edition | Exits the Designer, returns to the Home panel, and removes the "Designer" option from the top navigation menu |
Right Side Controls
| Control | Description |
|---|---|
| Show Mini Map | Displays a small overview map of the complete workflow, enabling quick navigation in large workflows |
| Expand Left Arrow | Expands the left canvas panel, providing more space for the diagram |
| Expand Right Arrow | Expands the right properties panel, providing more space for node configuration |
Node Properties Panel
The right section displays detailed properties and configuration options when a node or transition is selected:
- Tab-based interface: Different node types provide multiple tabs for organizing properties (e.g., Task and Task notification tabs for Task nodes)
- Form fields: Configurable properties specific to each node type
- Real-time validation: Immediate feedback on property value validity
- Code editors: Syntax-highlighted editors for scripts and expressions
- Action buttons: Edit, Delete, and Clone options for managing the selected element
Available Actions
| Action | Availability | Description |
|---|---|---|
| Edit | All nodes and transitions | Opens the node or transition for editing in the properties panel |
| Delete | All nodes and transitions | Removes the selected node or transition from the workflow |
| Clone | Task, Action, Mail, Scheduled, Library | Creates a duplicate of the selected node with identical properties |
Graphical Modeler Interactions
The Designer provides intuitive mouse-based interactions for efficient workflow modeling:
Node Interactions
| Interaction | Action |
|---|---|
| Single click on node | Selects the node and displays its properties in the right panel |
| Double click on node | Opens the node for editing with properties displayed in the right panel |
| Hover cursor over node | Displays a contextual menu above the node with options: Add, Edit, Clone, Delete |
| Drag node | Moves the node to a new position within the canvas design area |
Canvas Interactions
| Interaction | Action |
|---|---|
| Drag canvas background | Pans the diagram across the design area without selecting nodes |
| Mouse wheel scroll | Zooms in or out when the cursor is positioned over the canvas area |
| Single click on transition | Selects the transition and displays its properties in the right panel |
| Double click on transition | Opens the transition for editing with properties in the right panel |
Contextual Node Menu
When hovering the cursor over a node, a contextual menu appears above the node providing quick access to common operations:
| Menu Option | Description |
|---|---|
|
Add |
Opens a panel allowing you to add a new node to the workflow. Available node types:
|
| Edit | Opens the node for editing in the properties panel |
| Clone | Creates a duplicate of the node (available only for Task, Action, Mail, Scheduled, and Library nodes) |
| Delete | Removes the node from the workflow |
Workflow Design Workflow
Typical workflow design follows these steps:
- Access Designer: Click the edit icon on a workflow in the Home panel
- Add nodes: Use the contextual menu (hover over existing nodes) or drag-and-drop to add workflow nodes
- Configure nodes: Double-click nodes to edit properties in the right panel
- Create transitions: Connect nodes by drawing transitions between them
- Position elements: Drag nodes to organize the diagram logically
- Test and validate: Review the complete workflow structure
- Save changes: Click "Stop Edition" to save and return to the Home panel
Best Practices
- Use descriptive node names: Name nodes clearly to make the workflow diagram self-documenting
- Organize diagram layout: Position nodes logically to make the workflow flow easy to follow
- Leverage zoom controls: Use zoom in/out and fit diagram to navigate complex workflows efficiently
- Use mini map for large workflows: Enable the mini map when working with workflows containing many nodes
- Clone similar nodes: Save time by cloning nodes that share similar configurations
- Test transitions: Ensure all nodes have appropriate incoming and outgoing transitions
- Lock canvas when reviewing: Use the lock control to prevent accidental modifications while reviewing the workflow
- Save screenshots for documentation: Use the capture screenshot feature to document workflow versions
Use the mouse wheel for quick zooming while keeping your cursor positioned over the area of interest. This allows precise control over which part of the diagram to magnify.
The Designer panel automatically saves changes when you click "Stop Edition". There is no separate save button - all modifications are committed when you exit the Designer.
Important: Only Task, Action, Mail, Scheduled, and Library nodes can be cloned. Other node types (Start, End, Decision) must be created manually as cloning them could compromise workflow integrity.
