# Layout Controls

## Overview

The platform supports various layout elements for different types of inputs and controls you wish to present to the user.

{% hint style="info" %}
Layout controls can be browsed and used only after the page has been created.
{% endhint %}

In order to access the list of layout controls, select your page from the layouts manager and expand the **Controls** list in the layout elements panel on the left.

![Accessing Layout Controls](/files/-MHHew2mSeFguZP7Mmgr)

Layout controls are categorized as Actions, Panels, Sections, Lists and Input.

| Category | Purpose                                                            |
| -------- | ------------------------------------------------------------------ |
| Actions  | Executes the configured action on click (e.g. start a workflow)    |
| Panels   | Grouping of elements for more control over the layout design       |
| Sections | Provides components to further style the layout (e.g. page header) |
| Lists    | Grouping multiple objects of the same type as an ordered list      |
| Input    | Independent input fields to support other functional elements      |

## Adding Layout Controls

Controls can be added to your layout by dragging your selected control and dropping it in the main designer canvas.

![Adding a Control to the Layout](/files/-MHHgO4zv_KxLOzGrNTr)

Some layouts allows you to add nested controls, which can be done by dragging the control into the drop area for your layout and releasing it.

![Adding a Nested Control](/files/-MHHjF5w9yl8a-rkmOcB)

Multiple controls can be added to a single layout by dragging the next selected control over an existing one on the main designer canvas. The control can either be added above the existing one or below.

Dragging a control and dropping it on the left side of an existing control adds it above the existing one. Similarly, dropping the control on the right side of an existing control adds it below the existing one.

## Customizing Layout Controls

Customization options for layout controls can be accessed by clicking on the control name in the main designer canvas. This reveals an options ribbon that allow you to:

* Move your control's position in the layout
* Open control properties for further configurations
* Open control in a separate tab in the layout designer
* Delete control from your layout permanently

![Layout Control Customization Options](/files/-MHHl9hL_pnZK72zsUV1)

In case you have multiple controls in your layout, additional options are provided to help move your control above or below the others.

![Moving a Control on the Layout](/files/-MJ3d_QX1oURXuTuslbZ)

## Supported Layout Controls

* [Actions](/building-an-application/views/design-ui/layout-controls/actions.md)
  * [Action](/building-an-application/views/design-ui/layout-controls/actions.md#action)
  * [Action List](/building-an-application/views/design-ui/layout-controls/actions.md#action-list)
  * [Execute Command Box](/building-an-application/views/design-ui/layout-controls/actions.md#execute-command-box)
  * [View Changer](/building-an-application/views/design-ui/layout-controls/actions.md#view-changer)
* [Panels](/building-an-application/views/design-ui/layout-controls/panels.md)
  * [Collapse Panel](/building-an-application/views/design-ui/layout-controls/panels.md#collapse-panel)
  * [Conditional Panel](/building-an-application/views/design-ui/layout-controls/panels.md#conditional-panel)
  * [Dashboard Panel](/building-an-application/views/design-ui/layout-controls/panels.md#dashboard-panel)
  * [Docking Container](/building-an-application/views/design-ui/layout-controls/panels.md#docking-container)
  * [Docking Item](/building-an-application/views/design-ui/layout-controls/panels.md#docking-item)
  * [Field List Panel](/building-an-application/views/design-ui/layout-controls/panels.md#field-list-panel)
  * [Flex Panel](/building-an-application/views/design-ui/layout-controls/panels.md#flex-panel)
  * [For Each Class](/building-an-application/views/design-ui/layout-controls/panels.md#for-each-class)
  * [Horizontal Panel](/building-an-application/views/design-ui/layout-controls/panels.md#horizontal-panel)
  * [Html Panel](/building-an-application/views/design-ui/layout-controls/panels.md#html-panel)
  * [Instance Details](/building-an-application/views/design-ui/layout-controls/panels.md#instance-details)
  * [Instance Links Panel](/building-an-application/views/design-ui/layout-controls/panels.md#instance-links-panel)
  * [Layout Container](/building-an-application/views/design-ui/layout-controls/panels.md#layout-container)
  * [Menu Context](/building-an-application/views/design-ui/layout-controls/panels.md#menu-context)
  * [Panel](/building-an-application/views/design-ui/layout-controls/panels.md#panel)
  * [Popout Panel](/building-an-application/views/design-ui/layout-controls/panels.md#popout-panel)
  * [Quota Display](/building-an-application/views/design-ui/layout-controls/panels.md#quota-display)
  * [Scroll Panel](/building-an-application/views/design-ui/layout-controls/panels.md#scroll-panel)
  * [Slide Down Panel](/building-an-application/views/design-ui/layout-controls/panels.md#slide-down-panel)
  * [Tab List Panel](/building-an-application/views/design-ui/layout-controls/panels.md#tab-list-panel)
  * [Tab Panel](/building-an-application/views/design-ui/layout-controls/panels.md#tab-panel)
  * [Toolbar](/building-an-application/views/design-ui/layout-controls/panels.md#toolbar)
  * [View Dependent Panel](/building-an-application/views/design-ui/layout-controls/panels.md#view-dependent-panel)
* [Sections](/building-an-application/views/design-ui/layout-controls/sections.md)
  * [Horizontal Line](/building-an-application/views/design-ui/layout-controls/sections.md#horizontal-line)
  * [Info Box](/building-an-application/views/design-ui/layout-controls/sections.md#info-box)
  * [Label](/building-an-application/views/design-ui/layout-controls/sections.md#label)
  * [Page Header](/building-an-application/views/design-ui/layout-controls/sections.md#page-header)
  * [Picture Box](/building-an-application/views/design-ui/layout-controls/sections.md#picture-box)
* [Lists](/building-an-application/views/design-ui/layout-controls/lists.md)
  * [Canvas List](/building-an-application/views/design-ui/layout-controls/lists.md#canvas-list)
  * [Instance Context](/building-an-application/views/design-ui/layout-controls/lists.md#instance-context)
  * [Instance Frame](/building-an-application/views/design-ui/layout-controls/lists.md#instance-frame)
  * [List](/building-an-application/views/design-ui/layout-controls/lists.md#list)
  * [List Context](/building-an-application/views/design-ui/layout-controls/lists.md#list-context)
* [Input](/building-an-application/views/design-ui/layout-controls/input.md)
  * [Filter Input](/building-an-application/views/design-ui/layout-controls/input.md#filter-input)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tivity.one/building-an-application/views/design-ui/layout-controls.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.