> ## Documentation Index
> Fetch the complete documentation index at: https://docs.elementum.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Layout Builder
> Design, organize, and manage workflow data and features with layouts
# Layouts: Building Your Workflow UI
Elementum layouts let you visually design how users interact with workflow data and features. Layouts combine **Fields** (your workflow's state/data) and **Components** (Elementum-powered workflow features) into clear, actionable interfaces.
## Access the Layouts Builder
Once you click Create on a new object, you are automatically redirected to the Records Detail Layout.
To make edits later, open your app, element, or task. Click **Record Details Layout** under **User Interface** in the left navigation menu.
Changes in the record details layout are saved automatically. You may need to refresh to see the updates in your object records.
## Manage Workflow Stages
At the top of the Record Details Layout, manage the Workflow Stages by clicking the **+** button to add more or the **Edit** icon next to a stage to rename.
Click the **Delete** icon next to a stage to remove it. This is only available if you have multiple stages.
To reorder your stages, click the stage circle and drag to the desired order.
Each stage can have its own layout and fields. Click on the stage at the top of the page to arrange the layout.
**Bring AI into your workflow UI**
Admins can add an **Agent Button** (star icon) to any section of the layout. This lets users access an AI Agent designed to provide insights, suggestions, or actions tailored to that part of the workflow.
1. Toggle the star icon to enable Elementum Intelligence for a section
2. Select or create an Agent to assist users with context-specific help
3. Configure the Agent to match the needs of each workflow stage or section
[**Learn how to build and configure agents**](/ai-agents/agents-experience) and [**configure agent tools, channels, and integrations**](/ai-agents/agents-tools-and-deployment).
## Fields and Components
Click the **+** icon in a section or in the right panel to create and add Fields and Components. If you create the item in the panel, you'll still need to drag it to your layout to see it in record details.
To add a section, hover over the break in the field and click **+ Section**.
Sections group fields and components for clarity (e.g., "Header", "Invoice Data").
All items can be dragged to a new location in your layout. Click the **Delete** icon next to any item to remove it from your layout.
Field types can be reused in a stage. Components cannot.
If the item pulls in a list of data from a table or object, adjust the Display settings within the editor to apply to all future record details views.
## Fields: Your Workflow State
Fields are the core data elements of your workflow. When you add a field, you're defining a piece of state that's dynamically stored in your database. Fields are reusable and can be organized into sections.
### Field Types
| Type | Description |
| ----------------- | -------------------------------------- |
| Automation Button | Run automations directly from a record |
| Calculation | Computed fields |
| Checkbox | Boolean (true/false) |
| Create Button | Action triggers |
| Date | Date only |
| Date Time | Date and time |
| Decimal | Numeric values with decimals |
| Dropdown | Predefined selection options |
| File | File upload field (250MB max per file) |
| Groups | Assign teams |
| JSON Field | Structured data |
| Multi-Select | Multiple choice selections |
| Number | Numeric input |
| QR Code | Generate and display QR codes |
| Relate Button | Create relationships |
| Related Items | Linked records |
| Rich Text | Formatted content, descriptions |
| Text | Basic string input |
| User | Assign individuals |
**File Fields vs Attachments Component**: File fields are specific fields on a record for storing a single file (like "Invoice File" or "Contract Document"), while the Attachments component provides a general-purpose area for multiple file uploads. Both support files up to 250MB.
**Rich Text Fields**: Rich Text fields render both HTML and Markdown. To insert code, click the **Insert Quote** icon in the editor toolbar.
Fields added to a record details layout can be used for filtering and search in the object views.
***
## Components: Elementum Workflow Features
Components are first-class, pre-built workflow modules managed by Elementum. Unlike fields, components are not just data—they provide interactive features and logic.
### Common Components
* **Activity Log**: Track all record activity
* **Approvals**: Manage approval workflows
* **Attachments**: Upload and view multiple files (250MB max per file)
* **Related Tasks**: Link and manage tasks
* **Relationships**: Show related records
* **Surveys**: Collect structured feedback
* **Update Feed**: Display record updates
Admins can also add **automation buttons** to the record details layout. These buttons let users run a chosen automation directly from the record (e.g. "Send for approval", "Generate report"). See [Automation Buttons](/workflows/automation-buttons) for configuration and behavior.
***
## Example: Invoice Management Layout
```mermaid theme={null}
graph TD;
A[Header Section] -->|Fields| B[Status, ID, Title, Updated by, Updated on, Attachment]
A -->|Component| C[Configure Intelligence]
D[Invoice Data] -->|Fields| E[Invoice Summary, Invoice File, Invoice Number, Supplier Name, PO Number, Invoice Total, Spend Category, Ship To Address, Service Start, Service End, PO Line Memo, PO Line Type, Approver, Payment Terms]
F[Invoice to PO Matching] -->|Fields| G[Add Field Here]
```