1. Introduction to UI Builder
The UI Builder in Studio allows you to design dynamic, data-driven forms with ease. Whether you need simple input fields or complex automated calculations, the Form Builder provides intuitive tools to create and customize forms for your business workflows.
Key Benefits
- Drag-and-Drop Interface – Easily add and arrange fields.
- Data Integration – Connect forms to databases and master datasets.
- Automation – Use formulas to auto-calculate values.
- Custom Validation – Set mandatory fields and filters.
2. Navigation Guide for Form Builder
A. Accessing the Form Builder
Go to Studio > Your App / New App > Form
Click + Form or select an existing form to edit.
B. Form Builder Layout
The Form Builder consists of three main sections:
Form Elements Panel (Left Sidebar)
Contains all available field types (Text, Dropdown, Date, etc.).
Drag and drop fields onto the form canvas.
Form Canvas (Center)
Displays the live preview of your form.
Click any field to configure its properties.
Field Properties Panel (Right Sidebar)
Configure field settings (label, placeholder, validation).
Set advanced options like Master Data, Data Model, and Formulas.
3. Adding and Configuring Fields
A. Basic Field Types
| Field Type | Description | Example Use Case |
|---|---|---|
| Text Field | Single-line text input | Asset Name, Employee ID |
| Dropdown | Predefined list of options | Department, Status |
| Checkbox | Toggle for binary choices | Active/Inactive |
| Date | Date picker | Purchase Date |
| File Upload | Attach documents | Invoice Upload |
Steps to Add a Basic Field:
Drag a field (e.g., Text Field) onto the canvas.
In the Properties Panel, set:
Label Name (e.g., "Asset Name")
Placeholder Text (e.g., "Enter asset name")
Mandatory Field (Toggle ON if required)
B. Advanced Field Types
1. Master Data Fields
Link fields to predefined datasets (e.g., Customers, Vendors) for standardized selections.
Configuration Steps:
Drag a Dropdown field onto the form.
In Properties, select Master Data > Choose a dataset (e.g., "Customer").
Enable Add to Filter for searchable dropdowns.
Toggle Mandatory Field if required.
2. Data Model Fields
Pull dynamic data from existing database tables.
Configuration Steps:
Drag a Dropdown or Multiselect field.
In Properties, select Data Model > Choose a table (e.g., "Asset Tracking").
Set Key Column (unique identifier, e.g., "Asset_ID").
Enable Add to Filter for search functionality.
3. Formula Fields
Automatically calculate values using math functions.
Configuration Steps:
Click Add Field > Formula.
Enter Field Name (e.g., "Total Asset Value").
Write the formula (e.g.,
MULTIPLY(Asset Count, Asset Price)).Select Trigger:
On Create (calculates when record is created).
On Update (recalculates when edited).
Supported Functions:
ADD()– Sum values.MINUS()– Subtract values.DIVIDE()– Perform division.MULTIPLY()– Calculate products.
4. Form Rules & Validation
A. Mandatory Fields
Toggle Mandatory Field in the Properties Panel.
Users must fill these fields before submitting.
B. Conditional Logic
Show/hide fields based on user input (e.g., display "Approver" field only if "Amount > $1000").
5. Publishing the Form
Click Save to store changes.
Publish to make the form live for users.
Share via link or embed in a portal.
Points to Note
Auto-Created Data Model
Every form you create automatically generates a corresponding data model with the same name as the form title.
This data model stores all submissions and can be accessed for reporting, workflows, or integrations.
Form Title = Navigation Link
The Form Title you set will appear in the left navigation panel as a clickable link.
Users can directly access the form from here.
Customizing Form Layout
Use LogixFlow Flexi UI Designer to modify the form’s appearance, including:
Field arrangement (single/multi-column layouts).
Styling (colors, fonts, spacing).