# Creating a List Item Layout

In this section, we will go through customising the results of our queries using the List Item Layout to make it easy to keep track of tasks.

To create a new List Item Layout, click on the **New Page** :heavy\_plus\_sign:in the Layouts windows and click on List Item Layout**.**

![Creating a new List Item Layout](/files/-MBARA_REAyLrBWtEhYy)

After creating the page, jump into its **Page Settings** and set the **Name** to "Todo Item Layout", and under **Layout For Class**, set the dropdown to your To Do class.

### Creating the layout.

Firstly, we place a **Horizontal Panel**, then add the fields **Title**, **Owner** and **IsCompleted** to it. We also want to set the proportions of the fields in the **Horizontal Panel** as such :

| Field       | Proportion |
| ----------- | ---------- |
| Title       | 8/12       |
| Owner       | 3/12       |
| IsCompleted | 1/12       |

![Horizontal Panel Control Properties](/files/-MBASbKetj4vWXKhsnIa)

Finally, we want to show the label of the **Owner** field to quickly identify the column's meaning when looking at the list. We go into the **Owner Field Properties** and check the **Show Label Checkbox**.

Finally in **Preview Mode**, our work should look like this : 

![List Item Layout Preview](/files/-MBATC12FX07Lg-74xYK)

## Wrapping Up

And this brings us to the end of the tutorial. We learned to build a To Do Application from scratch and learnt some core concepts such as the Class Designer, Rights, Query Designer and Layout Designer.\
You can follow the links below for in-depth documentation of those concepts and learn more about the TIVITY Platform!

{% content-ref url="/pages/-MAVBfh9UZcHTNc6Jnx-" %}
[Data Modelling](/building-an-application/data/data-modelling.md)
{% endcontent-ref %}

{% content-ref url="/pages/-M8Hj\_UaVWiMHpDIqtPC" %}
[Roles & Permissions (Team app)](/managing-users-and-collaboration/roles-and-permissions.md)
{% endcontent-ref %}

{% content-ref url="/pages/-M8HjWmJKLSXJ8bKprqX" %}
[Query Designer](/building-an-application/data/query-data.md)
{% endcontent-ref %}


---

# 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/overview/getting-started/building-the-layout-1-2/creating-a-list-item-layout.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.