# Creating an App Page

As mentioned before, the App page will the main page the user will see when entering the application. To create a new App Page, click in the:heavy\_plus\_sign:**New Page** in the Layouts windows and click on **App Page.**

![Creating an App Page](/files/-MAqz87SpRG53r-QIkba)

This brings us directly to our new page's **Page Configuration** window. On the left will be a list of different **Templates** and **Controls.**

**Templates** are prebuilt layouts that are commonly used and which you can take advantage of to speed up the construction of your application's user interface.

You can also make use of the various **Controls** available to customise how the user interacts with your application, which we will be having a closer look at in the upcoming section of this guide.

Firstly, we want to name this new page `Start Page`. Click on **Page Settings**:gear:on top, and in the Page Properties enter `Start Page` in the **Name** field. 

We are now ready to move to the next sections and start building the user interface.

## Layout Container

Usually, when designing a page, we want to split it into a  Header, Body and Footer sections. The **Layout Container** achieves just that and will give us a base to work with when creating our user interface.

To add a control to our application, simply find it in the list then click and drag it to the designer are. You can filter through controls by typing its name in the **Filter** box. 

![Adding a Layout Container Control](/files/-MArDxGCC09B2dWbpNl5)

The **Layout Container** will be divided into 3 distinct sections, in which we can nest  **Controls** to build the user interface. 

## Header Control

Now it's time to add a header our application to nicely display its name. We will go through the basics of working with Controls by manipulating the Header Component. Just like we did in Layout Container, filter through the components to find the **Header Control,** and drag and drop it to the topmost slot of the **Layout Container.**

![Adding the Header Control](/files/-MArEdGzvTmYKIMxNvSa)

To interact with controls in the Layout Designer, click on the control which will reveal the following buttons : 

![Interacting with Controls](/files/-MArGzgAWukykQprqlBl)

1. Move Control
2. Control Properties
3. Focus on current element
4. Delete Control

To change the text in our header, click on the **Control Properties Button** and enter the application name in the **Text** field, for example, "My ToDos". Now our header looks like this :  

![Customised header](/files/-MArJ7ZkNTssoOo8a1nG)

## Scroll Panel and Actions Control

The body will be where the bulk of the interaction between the user and the application will happen and in this section, we will be working we will be building the actual content of the start page.

### **Scroll Panel**

As this part of the application will contain a lot of content, which depending on screen size might not fit in a single page, we start by adding a Scroll Panel which we will later nest other Controls and as its name suggest will allow the user to scroll through them.  

 Filter the list and find Scroll Panel, then click and drag it into the middle/body section of the Layout Container

Next, we will be adding components to visualise the following.

* Due Today
* My Tasks
* All Tasks
* Completed Tasks

Note that those match the queries we created in the[ Creating Queries](/overview/getting-started/creating-queries.md) section of the tutorial and we will be essentially visualising the result of those queries using the **Action Control** and also the **Chart Control.**

### Action Control

To view the result of the **Due Today** query we created earlier, we need to add an **Action Control** to our Scroll Panel.

Filter the controls and find the **Action Control**, click and drag it to our Scroll Panel.

In its properties, we change the **Text** to`Due Today`and we can also change the **Icon** to **Calendar**. This is optional but improves the look of our application.

Down under **Action**, we choose **Show result list,** and in **Type of data Source,** we select our **Due Today** query.

![Due Today Action Properties.](/files/-MAz0SR0oez-GfaplP08)

Repeat the steps above for the **My Tasks,** setting the **Text**, **Icon** and **Selection Data** accordingly.

Before adding the rest of the Actions, we add a **Horizontal Line Control** to create group our selections into two sections and make the design cleaner. Search for `Horizontal Line`, click and drag it underneath the My Todos Action.

At this point, this is what  Scroll Panel should look like:

![Scroll Panel Progress](/files/-MAz6dGsscNiRqFRB434)

Now we can add our **All Tasks** and **Completed Tasks** Actions following the same steps as above.

{% hint style="info" %}
To preview the look the application, you can click on the **Preview Button** at the top of the designer.
{% endhint %}

If all was done correctly, this is what the preview should look like :

![Preview of current progress](/files/-MAz7fL18skWMyowU85V)

## Charts using the List Control

In this last part of creating our App page, we will add a pie chart to display a comparison between the completed and outstanding tasks, and for this, we will make use of the **List Control.**

To start, we add a **List Context Control**, and then proceed to add a **List Control** inside. For this tutorial, we will not be diving too deep into setting up the **List Context Control**, but it is good practice to include one.

![List Context & List Controls added to the Designer](/files/-MBA3hGJXamzt0kR4DDz)

Let's start configuring out **List Control.** Like **Action Control** we want to retrieve our data from the **Completed Tasks** query. In the **List Control Properties** window, under Data Source :

* [ ] Set **Type Of Data Source** to **Selection**
* [ ] Set **Selection Data** to our **`All Tasks`**  query
* [ ] Set the **Initial View Mode** to **Charting**

![All Tasks Action Properties](/files/-MBA5jVFMJ1bUqO2zhh0)

After setting up our Data Source, we can now start customising our chart by clicking on Chart Options under the List Control in the designer.

![Chart Options located under the List Control](/files/-MAzLxVSsIuhIj--KZ07)

For the **X-AXIS** we want the`isCompleted`field. We set the **Title** to `Completed`. And be sure to set the **Display Type** to **Pie**.

In the Chart Options :

* [ ] Set the **X-Axis** to the **`isCompleted`** field
* [ ] Set the **Title** to `Completed`
* [ ] Set the **Display Type** to **Pie**

![Chart Options](/files/-MBA5dc0usLB4Zy9pYS8)

Click on **Apply** and our Pie chart is all set up!

## Final App page

After adding some data, this is what our App Page should look like

![Final Preview of the App Page](/files/-MBA9Y7p1BsJ8UCa9c3y)

We can now move on to learn how to create an Object Page


---

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