Getting Started

The Form UI Node lets you build powerful, data-aware forms directly inside any MergePoint workflow. It’s designed for structured input, exception handling, role-based approvals, and human-in-the-loop decision logic — all without writing code.

Each form is attached to a specific workflow step and responds in real time to upstream data, with full support for visibility controls, smart defaults, live evaluation, and data binding.

Core Capabilities

Visual Interface

• Point-and-click UI, no-code layout editor

• Real-time preview with live data injection

• Reorder, duplicate, and organize fields visually

Smart Components

• Supports default values from any step output

• Configurable tooltips, labels, and placeholders

• Per-component visibility rules to show/hide fields dynamically

• Conditional logic using values from other steps or fields

• Role-based permission control for each component

Multi-Screen & Batch Modes

• Single-screen or paginated forms

• Grid/table layouts for batch edits

• Conditional navigation between screens

Workflow Integration

• Outputs feed directly into downstream logic

• Component values can trigger branches or automations

• Forms operate within workflow state (e.g. before/after approvals)

Dynamic Data Binding

1. What Is a Step Output?

Step outputs are structured values returned by any previous node:

• Triggers (e.g. “New Row in Supabase”)

• Lookups (e.g. “Find Account by ID”)

• API calls, scripts, or database queries

Outputs are automatically available for reference inside the form.

2. How Components Receive Data

Each component supports dynamic bindings to:

• Default values

• Labels, descriptions, tooltips

• Visibility conditions

3. Component Visibility Controls

Every component includes a Visibility Condition editor:

• You can show or hide a component based on:

  • Step outputs (e.g. plan.type == "enterprise")

  • Other fields in the same form (e.g. region == "APAC")

  • Role-specific access

• Conditions support boolean expressions and dot notation

• If the condition evaluates to false, the field is hidden at runtime

Examples:

• Show "Reason for Rejection" only if status == "Declined"

• Hide company name field if it's already present in upstream data

• Display escalation section only if role == "Manager"

4. Type-Aware Field Binding

The editor only allows compatible bindings:

Invalid bindings are flagged and fallbacks are provided.

5. Live Evaluation at Runtime

All bound values are resolved dynamically during workflow execution:

• Values update in real time — even after delays or manual steps

• Visibility and conditional logic reflect the latest state

• Forms auto-refresh context based on the originating step data

6. How to Apply Data Bindings

To bind a value or set a visibility rule:

1. Click any editable field (Default, Label, Tooltip, Visibility, etc.)

2. Select Insert from Step

3. Choose the field from the dynamic picker or press @ to insert inline

You can also open Form Preview to see how values populate across sample data.

Creating a Form: Step-by-Step

Step 1: Add the Form UI Node

• In the Workflow Builder, click + Add Step

• Choose Form UI

• Click New Layout or select an existing form

Step 2: Add and Configure Components

• Choose from fields like:

  • Text Input, Select, Toggle, File Upload, Grid Table

  • Section headers, Instructions, Approval fields

• Set:

  • Field ID (used in data mapping)

  • Labels, default values, and visibility conditions

  • Role-based view/edit permissions

Step 3: Test and Preview

• Use the Preview pane to validate:

  • Field prefill logic

  • Visibility rules

  • Type compatibility

• Save and publish the layout

Step 4: Use in Workflow Runs

• When the form is triggered during a run:

  • Bound data appears instantly

  • Hidden fields are conditionally suppressed

  • Operator input becomes part of the workflow payload

Example Use Cases

Summary Table