---
schema_version: "1"
id: 9710db635232f93bf7b1c72e33a9684bb773ea4ef5f7122435ee13211a6dea15
title: Work with Layout Components
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/salesforce_app_agentforce_builder_work_components.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.salesforce_app_agentforce_builder_work_components.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 30a97b596392f71fe9be6c1d9f644eea8ea567b89ca77979f5329c91052d5efc
description: Add, remove, and configure layout components on the canvas.
products:
  - Mobile App Mobile App Mobile App
  - Cross Cloud Cross Cloud Cross Cloud
release: "264"
---
# 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

1. Drag a component from the Components panel onto the canvas.
2. Nest the component inside a Row or Column container, if needed, to control layout.
3. 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

1. In the canvas, hover over the component you want to move. A menu appears.
2. Drag the move icon to the new location.

Delete a Component

1. In the canvas, hover over the component you want to delete.
2. Click the delete icon in the menu.
3. Click **Delete** to confirm.

Save Your Work

1. Click **Save** in the status bar to save your customization as a draft.
    
    You can return later to keep editing.