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: - Action: Executes Java code automatically - Mail: Sends email notifications - Task: Creates user tasks requiring human interaction - Scheduled: Executes actions on a scheduled basis - Library: Defines reusable code libraries
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:

1. Access Designer: Click the edit icon on a workflow in the Home panel
2. Add nodes: Use the contextual menu (hover over existing nodes) or drag-and-drop to add workflow nodes
3. Configure nodes: Double-click nodes to edit properties in the right panel
4. Create transitions: Connect nodes by drawing transitions between them
5. Position elements: Drag nodes to organize the diagram logically
6. Test and validate: Review the complete workflow structure
7. 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

Tip

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.

Note

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.

Caution

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.