User Interface

Ondeva’s Workflow Builder provides a visual programming interface that lets you design automations, conditional logic, and data flows without touching code — while remaining powerful enough for real-world, cross-system automation. Here's a breakdown of the UI to help you navigate with confidence.

The Workflow Builder interface is divided into four main regions:

1. Left Panel – Step Library

2. Central Canvas – Workflow Flowchart

3. Right Panel – Properties & Configuration

4. Top Bar – Workflow Actions & Metadata

---

Left Panel: Step Library

This is where you select the building blocks of your workflow. Steps are grouped into categories:

• Presentation (e.g., Show Dialog)

• Logic (e.g., Condition Checks, Loops)

• Data (e.g., Save Entry, Load Query)

• AI (e.g., Text Generation, Summarization)

• UX & Browser (e.g., Redirect, JS Execution)

• User Flow & E-Commerce (e.g., Login, License Enforcing)

How to Use:

• Drag a step from the library and drop it onto the canvas

• Use the scroll or search to find specific steps

---

Central Canvas: Visual Flow Editor

This is your primary working area where you build and connect steps in a flow.

Key Interactions:

• Drag & Drop: Arrange steps freely

• Connect Steps: Click the output node of a step (small circle) and drag to another to define execution order

• Zoom & Pan: Use your mouse scroll to zoom and drag the background to navigate across large workflows

• Right-click (coming soon): For fast actions like duplicate, delete

Structure:

• Steps execute sequentially based on your visual flow

• Branches (e.g., from conditions or loops) allow complex logic trees

---

Right Panel: Properties Editor

The right-hand panel dynamically shows options for the currently selected step or global workflow settings if no step is selected.

Modes:

• Step Selected: Edit fields like target table, variables, conditions, API endpoint, etc.

• No Selection: Shows general workflow settings, including:

  • Execute via JS Function: Allows you to run this workflow from frontend components via a custom JavaScript call.

    const showBusyIndicator = true;
    const properties = {
    	'variable1': 'value1';
    }
    triggerAction('ID_OF_WORKFLOW', showBusyIndicator, properties);

  • Ensure Authentication: Enforces login before the workflow can execute

---

Top Bar: Workflow Controls

This area contains core controls for saving, testing, and publishing your workflow.

Controls:

• Expand: Toggles step cards between compact and detailed views

• Execute: Runs the workflow immediately with current data (great for testing)

• Publish: Makes the workflow live and usable throughout your app (e.g., via buttons, page triggers, time-based events)

• Workflow Name: Click to rename your workflow

---

Workflow Events & Triggers

In the global settings panel you can define how this workflow is triggered.

Supported Event Types:

• Page Load

• Page Load Completed

• Time Trigger (e.g., every hour, every day at 9am)

• Custom Events

How to Use:

• Define one or more triggers per workflow.

• Button click, file upload completed and form submission events are created automatically when you select the workflow in the respective configuration of the UI component.

---

Tips for Navigating the UI

• Use naming consistently: Label workflows clearly for reuse across your app

• Modularize logic: Use sub-workflows (via "Execute Workflow") to keep flows clean

• Zoom out often: Large workflows can get complex — use spacing and grouping visually

• Preview values: Use session and variable names consistently to make logic traceable in debugging