# 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**](https://docs.ondeva.com/workflow/steps-reference/presentation) (e.g., Show Dialog)
* [**Logic**](https://docs.ondeva.com/workflow/steps-reference/logic) (e.g., Condition Checks, Loops)
* [**Data**](https://docs.ondeva.com/workflow/steps-reference/data) (e.g., Save Entry, Load Query)
* [**AI**](https://docs.ondeva.com/workflow/steps-reference/ai-integration) (e.g., Text Generation, Summarization)
* [**UX & Browser**](https://docs.ondeva.com/workflow/steps-reference/ux-and-browser-control) (e.g., Redirect, JS Execution)
* [**User Flow & E-Commerce**](https://docs.ondeva.com/workflow/steps-reference/user-flow-and-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](https://docs.ondeva.com/workflow/steps-reference) 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.

    ```jsx
    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