You are here:
Work with Layout Components
Add, remove, and configure layout components on the canvas.
Mobile Builder for Agentforce includes eight layout components:
| Component | Description |
|---|---|
| Row | A horizontal container. Use to align child components side by side. |
| Column | A vertical container. Use to stack child components. |
| Text | A static text label. The text is the same for every response. |
| Data Text | A text label bound to a field from the action's output. The value comes from the Agentforce response. |
| Image | A static image. Set the source to a URL or a CMS-hosted asset. |
| Data Image | An image bound to a URL field from the action's output. |
| Data Badge | A styled badge bound to a field from the action's output. |
| Data Button | A button bound to a field from the action's output. |
Add a Component
- Drag a component from the Components panel onto the canvas.
- Nest the component inside a Row or Column container, if needed, to control layout.
-
With the component selected, configure its properties in the property pane:
- For data-bound components (Data Text, Data Image, Data Badge, Data Button): Select a field from the dropdown. The dropdown lists the top-level output fields from your Agentforce action.
- For Row and Column: Set width, height, and alignment.
- For Text and Image: Set the static content and styling options.
Reorder a Component
- In the canvas, hover over the component you want to move. A menu appears.
- Drag the move icon to the new location.
Delete a Component
- In the canvas, hover over the component you want to delete.
- Click the delete icon in the menu.
- Click Delete to confirm.
Save Your Work
-
Click Save in the status bar to save your customization as a
draft.
You can return later to keep editing.
Did this article solve your issue?
Let us know so we can improve!
