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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ondeva.com/workflow/user-interface.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.