# Page Types

## Overview

The first step to creating your new layout is selecting your **Page Type**. The platform supports several page types each catering for different types of user interfaces.

#### Page Types

* [App Page](/building-an-application/views/design-ui/page-types.md#app-page)
* [Object Page](/building-an-application/views/design-ui/page-types.md#object-page)
* [Object Section](/building-an-application/views/design-ui/page-types.md#object-section)
* [Object Links Page](/building-an-application/views/design-ui/page-types.md#object-links-page)
* [List-Result Page](/building-an-application/views/design-ui/page-types.md#list-result-page)
* [List Item Layout](/building-an-application/views/design-ui/page-types.md#list-item-layout)
* [Dashboard Widget](/building-an-application/views/design-ui/page-types.md#dashboard-widget)
* [App Dashboard](/building-an-application/views/design-ui/page-types.md#app-dashboard)
* [Base Layout](/building-an-application/views/design-ui/page-types.md#base-layout)

After selecting your page type, the page settings can be configured by selecting <img src="/files/-MBCo7T7BtG64Zwffv31" alt="" data-size="line"> Page Settings option in the action toolbar (located at the top of the layout designer).

![Accessing Page Properties](/files/-MFX45FznzTgheYH8LXD)

## App Page

The **app page** is a page is one that is not bound to any objects or object context. It is mostly used to display general information and other content related to your application.

{% hint style="info" %}
The first **app page** created is used as the default landing page of your application.
{% endhint %}

![App Page Configuration](/files/-MFX4hmLd-o4KGqLneTv)

### Name

The name property is used to define a unique name for the page.

### Description

The description field can be used to describe the purposes of your page for the users.

### Page Size

The size determines the dimensions of the page to be displayed.

Supported values for **Page Size**:\
Very Small, Small, Regular, Very Large, Extra Wide and Full Width

## Object Page

The **object page** displays information retrieved for a specific object instance. Hence, it must be bound to a particular object in order to be used.

{% hint style="info" %}
Special information related only to a particular object can be displayed using this page.
{% endhint %}

![Object Page Configuration](/files/-MFX5AixB0jYF0u0L7Tj)

### Name

The name property for an **object page** is used to define a unique name for the page.

### Description

The description field can be used to describe the purposes of your **object page** to the users.

### Page Size

The size determines the dimensions of the page to be displayed.

Supported values for **Page Size**:\
Very Small, Small, Regular, Very Large, Extra Wide and Full Width

### Layout for Class

The **object page** needs to be created for use within the context of a particular class. This field allows you to set which class should be associated to your page.

## Object Section

The Object Section page type acts as a custom component bound to a class. This can be used to embed your component within other class-bound page layouts by using the Object Section control.

## Object Links Page

The Object Links Page is a special page that displays all the links and linked instances for the current object instance. This page can be opened by the user if it is placed within an Instance Links Panel on your layout.

## List-Result Page

The **list-result page** is a unique page used when creating layouts to display lists of items, such as search results. The page can be used with

* Classes - to display a list of objects of the same class
* Queries - to display results from a query

Regardless of where the query is called in your application, the associated **list-result page** is always used to display the results.

{% hint style="info" %}
**List-Result Pages** can be displayed as the result of an action in the layout as well.
{% endhint %}

![List-Result Page Configuration](/files/-MFX5vEOD3dY2W3uRBlH)

### Name

The name property for a **list-result page** is used to define a unique name for the page.

### Description

The description field can be used to describe the purposes of your **list-result page** to the users.

### Page Size

The size determines the dimensions of the page to be displayed.

Supported values for **Page Size**:\
Very Small, Small, Regular, Very Large, Extra Wide and Full Width

### Layout Config

The layout config allows you to determine for which classes/queries should this **list-result page** be used.

* **Use for classes:** Select the classes that will use this page
* **Use for selections:** Select the queries that will use this page
* **Use for links:** Select which class links will use this page

## List Item Layout

The **list item layout** page can be used to define how an individual item (for instance from a set of search results) should appear in Represents List, Timelines or Kanban Cards.

{% hint style="info" %}
List Item Layout is prioritized and will always be used to display your items when used, overriding alternate display layouts such as HTML layouts.
{% endhint %}

![List Item Layout Configuration](/files/-MFX6qNOvLVzAonCu4GV)

### Name

The name property for a **list item layout** is used to define a unique name for the page.

### Description

The description field can be used to describe the purposes of your **list item layout** to the users.

### Page Size

The size determines the dimensions of the page to be displayed.

Supported values for **Page Size**:\
Very Small, Small, Regular, Very Large, Extra Wide and Full Width

### Layout for Class

The **list item layout** needs to be created for use within the context of a particular class. This field allows you to set which class should be associated to your page.

## Dashboard Widget

The **dashboard widget** is a small layout element which can users can pin on their dashboards.

![Dashboard Widget Configurations](/files/-MHqmixV8ISVwTjt84mx)

### Name

The name property for a **dashboard widget** is used to define a unique name for the page.

### Description

The description field can be used to describe the purposes of your **dashboard widget** to the users.

### Widget Size

You can determine the size of your widget for dashboards.

* **Widget Size-X:** Size of widget horizontally (x-axis)
* **Widget Size-Y:** Size of widget vertically (y-axis)

{% hint style="info" %}
Widget size values (both horizontally and vertically) vary between 1 to 4, where 4 takes the most space possible for a widget on the dashboard.
{% endhint %}

## App Dashboard

Instead of creating a single widget layout using the **dashboard widget** page type, a complete dashboard can be defined using **app dashboard**.

When adding new dashboard tabs, an end user can select your **app dashboard** page to add a full pre-configured dashboard layout to their tabs.

![App Dashboard Configuration](/files/-MFX7QFRDkZ3Azq0w0Ia)

### Name

The name property for an **app dashboard** is used to define a unique name for the page.

### Description

The description field can be used to describe the purposes of your **app dashboard** to the users.

## Base Layout

The Base Layout is a special layout that is used for instances where no custom object page layout has been defined yet.

{% hint style="info" %}
When no base layouts are specified, the platform will generate one for you.\
Alternately, if a base layout has been created, the platform will use it as the fallback item.
{% endhint %}


---

# 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/page-types.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.
