> For the complete documentation index, see [llms.txt](https://docs.tivity.one/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tivity.one/overview/getting-started/building-the-layout-1-2/creating-a-list-item-layout.md).

# 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 %}