# Layout Templates
## Overview
Layout templates are a collection of layout controls preconfigured to some extent by the system. Templates allow you to quickly setup a particular type of layout to ease your layout designing experience.
In order to access the list of layout templates, select your page from the layouts manager and expand the **Templates** list in the layout elements panel on the left.
Each template makes use of traditional layout controls and elements which can be further customized by selecting the control in the layout designer canvas and clicking on the gear icon to access its properties.
The templates are categorized by type:
* [Pages](/building-an-application/views/design-ui/layout-templates.md#page-templates)
* [App Page](/building-an-application/views/design-ui/layout-templates.md#app-page)
* [Object Links Page](/building-an-application/views/design-ui/layout-templates.md#object-links-page)
* [Object Page](/building-an-application/views/design-ui/layout-templates.md#object-page)
* [Result List Page](/building-an-application/views/design-ui/layout-templates.md#result-list-page)
* [Sections](/building-an-application/views/design-ui/layout-templates.md#section-templates)
* [Change List Sort Action](/building-an-application/views/design-ui/layout-templates.md#change-list-sort-action)
* [Field Container](/building-an-application/views/design-ui/layout-templates.md#field-container)
* [Page Menu](/building-an-application/views/design-ui/layout-templates.md#page-menu)
* [Show List Actions](/building-an-application/views/design-ui/layout-templates.md#show-list-actions)
* [Show Object Actions](/building-an-application/views/design-ui/layout-templates.md#show-object-actions)
* [Toggle Object Links](/building-an-application/views/design-ui/layout-templates.md#toggle-object-links)
* [List](/building-an-application/views/design-ui/layout-templates.md#list-templates)
* [List with Context](/building-an-application/views/design-ui/layout-templates.md#list-with-context)
## Page Templates
Page templates refer to a set of templates that supply a basic page layout using panels and other elements. This allows you to quickly get your layout page up and running.
### App Page
The **App Page** template can be used as a basis for all [App Pages](/building-an-application/views/design-ui/page-types.md#app-page). It makes use of all standard elements and functions, giving users a consistent look and feel.
{% hint style="success" %}
The template abides by best practices to make sure your application is consistent throughout.
{% endhint %}
#### Template Elements
* [Panels](/building-an-application/views/design-ui/layout-controls/panels.md)
* [Layout Container](/building-an-application/views/design-ui/layout-controls/panels.md#layout-container)
* [Panel](/building-an-application/views/design-ui/layout-controls/panels.md#panel)
* [Scroll Panel](/building-an-application/views/design-ui/layout-controls/panels.md#scroll-panel)
* [Sections](/building-an-application/views/design-ui/layout-controls/sections.md)
* [Page Header](/building-an-application/views/design-ui/layout-controls/sections.md#page-header)
### Object Links Page
The **Object Links Page** template can be used as a basis for all [Object Links Pages](/building-an-application/views/design-ui/page-types.md#object-links-page). It makes use of the recommended layout elements to display all object links information.
#### Template Elements
* [Panels](/building-an-application/views/design-ui/layout-controls/panels.md)
* [Layout Container](/building-an-application/views/design-ui/layout-controls/panels.md#layout-container)
* [Panel](/building-an-application/views/design-ui/layout-controls/panels.md#panel)
* [Scroll Panel](/building-an-application/views/design-ui/layout-controls/panels.md#scroll-panel)
* [Sections](/building-an-application/views/design-ui/layout-controls/sections.md)
* [Page Header](/building-an-application/views/design-ui/layout-controls/sections.md#page-header)
* Context Tree
### Object Page
The **Object Page** template can be used as a basis for all [Object Pages](/building-an-application/views/design-ui/page-types.md#object-page). It makes use of the best fitting layout control to provide a clean interface to browse and access objects in your application.
#### Template Elements
* [Panels](/building-an-application/views/design-ui/layout-controls/panels.md)
* [Layout Container](/building-an-application/views/design-ui/layout-controls/panels.md#layout-container)
* [Panel](/building-an-application/views/design-ui/layout-controls/panels.md#panel)
* [Scroll Panel](/building-an-application/views/design-ui/layout-controls/panels.md#scroll-panel)
* [Conditional Panel](/building-an-application/views/design-ui/layout-controls/panels.md#conditional-panel)
* [Instance Links Panel](/building-an-application/views/design-ui/layout-controls/panels.md#instance-links-panel)
* [Collapse Panel](/building-an-application/views/design-ui/layout-controls/panels.md#collapse-panel)
* [Field List Panel](/building-an-application/views/design-ui/layout-controls/panels.md#field-list-panel)
* [Horizontal Panel](/building-an-application/views/design-ui/layout-controls/panels.md#horizontal-panel)
* [Toolbar](/building-an-application/views/design-ui/layout-controls/panels.md#toolbar)
* [Sections](/building-an-application/views/design-ui/layout-controls/sections.md)
* [Page Header](/building-an-application/views/design-ui/layout-controls/sections.md#page-header)
* [Actions](/building-an-application/views/design-ui/layout-controls/actions.md)
* [Action](/building-an-application/views/design-ui/layout-controls/actions.md#action)
* [View Changer](/building-an-application/views/design-ui/layout-controls/actions.md#view-changer)
### Result List Page
The **Result List Page** template can be used as a basis for all [Result List Pages](/building-an-application/views/design-ui/page-types.md#list-result-page). It contains all the elements to provide a clean layout for list-based operations such as searching or filtering.
#### Template Elements
* [Panels](/building-an-application/views/design-ui/layout-controls/panels.md)
* [Layout Container](/building-an-application/views/design-ui/layout-controls/panels.md#layout-container)
* [Panel](/building-an-application/views/design-ui/layout-controls/panels.md#panel)
* [Scroll Panel](/building-an-application/views/design-ui/layout-controls/panels.md#scroll-panel)
* [Conditional Panel](/building-an-application/views/design-ui/layout-controls/panels.md#conditional-panel)
* [Sections](/building-an-application/views/design-ui/layout-controls/sections.md)
* [Page Header](/building-an-application/views/design-ui/layout-controls/sections.md#page-header)
* [Actions](/building-an-application/views/design-ui/layout-controls/actions.md)
* [Action](/building-an-application/views/design-ui/layout-controls/actions.md#action)
* [View Changer](/building-an-application/views/design-ui/layout-controls/actions.md#view-changer)
* [Lists](/building-an-application/views/design-ui/layout-controls/lists.md)
* [List Context](/building-an-application/views/design-ui/layout-controls/lists.md#list-context)
* [List](/building-an-application/views/design-ui/layout-controls/lists.md#list)
* [Inputs](/building-an-application/views/design-ui/layout-controls/input.md)
* [Filter Input](/building-an-application/views/design-ui/layout-controls/input.md#filter-input)
## Section Templates
Section templates are a collection of templates that consist of layout controls to make the best use of section components under different circumstances.
### Change List Sort Action
The **Change List Sort Action** template provides an [Action](/building-an-application/views/design-ui/layout-controls/actions.md#action) control that is designed to provide sorting options to the user.
#### Template Elements
* [Actions](/building-an-application/views/design-ui/layout-controls/actions.md)
* [Action](/building-an-application/views/design-ui/layout-controls/actions.md#action)
### Field Container
The **Field Container** template is used to insert a horizontally arrange field list panel into a collapse panel.
#### Template Elements
* [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)
* [Field List Panel](/building-an-application/views/design-ui/layout-controls/panels.md#field-list-panel)
* [Horizontal Panel](/building-an-application/views/design-ui/layout-controls/panels.md#horizontal-panel)
### Page Menu
The **Page Menu** template is used to provide a basic design for a page context menu.
#### Template Elements
* [Panels](/building-an-application/views/design-ui/layout-controls/panels.md)
* [Menu Context](/building-an-application/views/design-ui/layout-controls/panels.md#menu-context)
* [Scroll Panel](/building-an-application/views/design-ui/layout-controls/panels.md#scroll-panel)
* Context Tree
### Show List Actions
The **Show List Actions** template is designed for use in lists and list contexts. This allows users to change the view of the list, for instance when using Kanban, List or Timeline view.
#### Template Elements
* [Panels](/building-an-application/views/design-ui/layout-controls/panels.md)
* [Conditional Panel](/building-an-application/views/design-ui/layout-controls/panels.md#conditional-panel)
* [Actions](/building-an-application/views/design-ui/layout-controls/actions.md)
* [Action](/building-an-application/views/design-ui/layout-controls/actions.md#action)
### Show Object Actions
The **Show Object Actions** template is designed for use in lists and list contexts. This allows users to access specific actions that can be applied to objects.
#### Template Elements
* [Panels](/building-an-application/views/design-ui/layout-controls/panels.md)
* [Conditional Panel](/building-an-application/views/design-ui/layout-controls/panels.md#conditional-panel)
* [Actions](/building-an-application/views/design-ui/layout-controls/actions.md)
* [Action](/building-an-application/views/design-ui/layout-controls/actions.md#action)
### Toggle Object Links
The **Toggle Object Links** template is designed to allow the user to retrieve the links of an object.
#### Template Elements
* [Panels](/building-an-application/views/design-ui/layout-controls/panels.md)
* [Conditional Panel](/building-an-application/views/design-ui/layout-controls/panels.md#conditional-panel)
* [Actions](/building-an-application/views/design-ui/layout-controls/actions.md)
* [Action](/building-an-application/views/design-ui/layout-controls/actions.md#action)
## List Templates
List templates are a collection of templates using layout controls to provide an easy way to design layouts centered around lists.
### List with Context
The **List With Context** template creates a list embedded in a **List Context** element with a predefined toolbar for additional list actions.
{% hint style="success" %}
It is recommended to use this template whenever lists are used.
{% endhint %}
Predefined toolbar consists of:
#### Filter Input
Filter input is described in the [Layout Controls, section Input](https://docs.tivity.one/building-an-application/views/design-ui/layout-controls/input#filter-input).
Filter Input
#### Action with Menu (ellipsis-h/three dots)
Action with Menu represented by the ellipsis-h icon/three dots provides you the menu of available list actions in the form of a drop down.
Action Menu
Depending on the settings, it can contain options: Change sorting (of the list), Refresh (list), Open (list) in new window, (Tracker of user) Activity, Export (of the list).
Clicking on *Export* opens a new page with selection of the Export format.
Export Options
Here you can choose between CSV (Comma-Separated Values) and Excel file format.
If there are images in the list it is about to be exported, they are sized and positioned within one cell each in the exported table. Images are centered within the cell and their aspect ratio is considered (corresponds to Excel picture formatting functionality *Lock aspect ratio* and *Move and size with cells*).
#### Refresh action
Refreshing a list is also available as a one-click action within the toolbar. This action is described in the [Layout Controls, section Actions.](https://docs.tivity.one/building-an-application/views/design-ui/layout-controls/actions#refresh-page)
Refresh Action
#### Sorting action
Integrates the option accessible for the users by one-click to change a list sorting. Sorting is described in the Layout Controls, section Action, [Change List Sorting](https://docs.tivity.one/building-an-application/views/design-ui/layout-controls/actions).
Sorting Action
### List Bulk Editing Toolbar
List Bulk Editing Toolbar gives you the possibility to insert and configure custom actions which will be executed on the selected list item of the list for which the toolbar has been inserted.
The control is only visible in a List Context if the list of the context is visible (in 'List' mode) and the bulk editing is started. The toolbar is comprised of actions like instance actions or workflows which you can configure and execute for the class of the List for the List Context and particularly for each selected instance.
Bulk Editing Toolbar
The toolbar and actions are by default displayed like the bulk editing default toolbar and actions. Selected actions of the in the toolbar inserted control type actions like instance actions and workflows are only displayed if all selected instances can execute the action.
Action Selection in the Control Type Action Configuration Menu
Following special actions for the purpose of bulk editing and customizing the bulk editing toolbar are available:
* Start bulk editing -the action is only visible in a List Context if the List of the context is visible (in 'List' mode) and the bulk editing is not started. The bulk editing will be started if the action is executed.
* End bulk editing - the action is only visible in a List Context if the List of the context is visible (in 'List' mode) and the bulk editing is started. The bulk editing will be ended if the action is executed.
* Select all (bulk editing) - the action is only visible in a List Context if the List of the context is visible (in 'List' mode), the bulk editing is started and not all instances are already selected. All instances are selected if the action is executed.
* Deselect all (bulk editing) - the action is only visible in a List Context if the List of the context is visible (in 'List' mode), the bulk editing is started and all instances are already selected. All instances are deselected if the action is executed.
* Menu (bulk editing) - displays all the instance actions, workflows and templates the selected instances can execute. The bulk editing default toolbar displays the name new menu.
* Execute bulk action - within the action the configurator can select the instance action to execute when the bulk execution gets executed by the end user. The action is only visible in a List context if the List of the context is visible (in 'List' mode), the bulk editing is started, at least one instance is selected and all selected instances support the configured action.
* Execute bulk workflow - within the action the configurator can select the instance workflow to execute when the bulk execution gets executed by the end user. The action is only visible in a List context if the List of the context is visible (in 'List' mode), the bulk editing is started, at least one instance is selected and all selected instances support the configured workflow.
Selectable Actions
#### Template Elements
* [Panels](/building-an-application/views/design-ui/layout-controls/panels.md)
* [Conditional Panel](/building-an-application/views/design-ui/layout-controls/panels.md#conditional-panel)
* [Toolbar](/building-an-application/views/design-ui/layout-controls/panels.md#toolbar)
* [Actions](/building-an-application/views/design-ui/layout-controls/actions.md)
* [Action](/building-an-application/views/design-ui/layout-controls/actions.md#action)
* [Lists](/building-an-application/views/design-ui/layout-controls/lists.md)
* [List Context](/building-an-application/views/design-ui/layout-controls/lists.md#list-context)
* [List](/building-an-application/views/design-ui/layout-controls/lists.md#list)
* [Inputs](/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-templates.md?ask=
```
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.