# Creating an Object Page

For this part of the tutorial, we will be using Object Pages to build a detailed page to view and edit specific tasks.  To create a new Object Page, click in the:heavy\_plus\_sign:**New Page** in the Layouts windows and click on **Object Page.**

![Creating a new Object Page](/files/-MBAB_ybkMoNZqrsdPMC)

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

### Header

Just like we did for the[ App Page](/overview/getting-started/building-the-layout-1-2/the-app-page.md), we add a Layout Container and a Header to our new Object page, by finding them in the list and dragging them to the designer area. 

We want our Header to be dynamic, and the title to reflect the name of the current task the user is looking at. Go the header's **Properties window** set the **Text** field to "Details - {{instance.name}}"

![Heeader Properties for a dynamic title](/files/-MBADQaiwvnZmFQFC7Bb)

The `{{instance.name}}` token will be replaced by the name of the task that we click on.

### Toolbar

Next, we want to add a toolbar which will allow users to refresh the details of the current task item. Find the Toolbar Control and drag it underneath the header. Inside the Toolbar, we then add an Action Control.

Time to configure the Action. In its Properties windows :

* [ ] Check the Align Right box
* [ ] Set the icon as `refresh`
* [ ] Set the Action as **Refresh Page**

{% hint style="warning" %}
Note that for this Action Control, we did not provide anything to the Text field. This is because we only want the icon to be displayed.
{% endhint %}

![Refresh Action Control Properties](/files/-MBAE3AIxuLbdfxzV3tn)

## Designing the Page

We can now proceed to add the main controls of the page which will allow the user to view and modify a task.  

Firstly, we add a **Scroll Panel** to the middle part of our Layout Container. Inside it proceed to insert a **Collapse Panel.** 

**Collapse Panels** can expand or collapse to reveal or hide other controls. This is a great way to group multiple controls while keeping the interface uncluttered. In the properties window of this panel, set the **Text** to `General` 

In this panel, we can now add the fields of our task that we want to display. In the leftmost list in the Object page will be a list of fields from out To Do class. We select the **Title**, **Is Completed**, and **Notes** fields and place them under each other in the General Collapse Panel.

![Collapse Panel with Fields added](/files/-MBAFgNHOvZ2r2e4IV8H)

Next, we want to have 3 fields displayed next to each other horizontally. To achieve this, we make use of the **Horizontal Panel**.  We and now add our next three fields **Owner**, **Due Date** and **Priority** to it. The **Horizontal Panel Control** makes use of a 12-column responsive grid system.

This system divides a row into 12 columns. Controls can be allocated multiple of those 12 columns depending on the width you want it to occupy. The Horizontal Panel is also able to display content differently depending on the screen size by allocating a different amount of columns to the control in the Small and Normal Fields. For example, on a Normal screen, we might have a particular control displayed in 3 columns, but on a small screen, we only want 6 columns. 

For our 3 fields, we want columns to always be evenly distributed, we go into the **Properties windows** and set the width for each element to **4** (12 columns divided by 3 fields).

![Horizontal Panel Properties](/files/-MBAGGt_hVNUEjCQMn8d)

{% hint style="info" %}
Alternatively, the **Flex Panel** can be used. While the **Horizontal Panel** has fixed divisions of 12 columns, the **Flex Panel** allows you to define percentage values and minimum and maximum widths, which allows a much more dynamic layout but is also more complex.
{% endhint %}

## TIVITY File Integration

After having added all the fields for our class, we want to be able to view and attach TIVITY Files to our task. 

To start, let's add a second **Collapse Panel** to keep the page organised and in its **Properties**, we are going to name it `TIVITY File`.

![TIVITY File location in the list](/files/-MBAHU_6vIrJjsEZyaUQ)

Now in the leftmost list, under **Links - Main > Links**, find the TIVITY File component, drag it and drop into our Collapse Panel.

![TIVITY File Integrated into a Collapse Panel](/files/-MBAHxGTIiqlMo9ctH3V)

The Controls inside the TIVITY File integration are already preconfigured, and without any further changes, we can now proceed to finish up this page.

## Footer Actions

Now to complete our Detail Page we want to add **Save** and **Delete Actions** at the bottom of our page.

Let's start by adding a **Toolbar Control** to the bottom/footer section of our **Layout Container**

### Save Button

The save functionality is not always available, for instance, if Read Only. For this reason, we do not want to show the save button. To achieve this, we make use of the **Conditional Panel**.  

The Conditional Panel's content is visible only of some particular requirements are met. To add a Conditional Panel, search for it in the list of Controls and drag it to Toolbar. Then in its Properties windows :

* [ ] Set the **Condition** to `{{instance.options.readOnly}}`
* [ ] Set **Compare Operation** to **=**
* [ ] Set **Compare to Value** to **False**

The expression "{{instance.options.readOnly}} = False"checks if the object is Read Only. If that’s the case, it won’t display the Save Button.

![Conditional Panel Control Properties](/files/-MBAISS0T6IYLBBipynf)

{% hint style="warning" %}
In case a **Conditional Panel** is not added, the save button simply will not work on Read Only objects
{% endhint %}

Now that our **Conditional Panel** is all set up, we can add an **Action Control** to it to act as save button. In its properties :

* [ ] Set the **Text** to "Save"
* [ ] Check the **Align Right** box
* [ ] Under **Icon** the "save" icon   
* [ ] Set the **Action** to **Save Instance** 

![Save Action Control Properties](/files/-MBAMqKmWSCHgSfyFVbS)

### Delete Button

For the Delete Button, we configure the **Conditional Panel** to cater for Read Only objects the same way as for the Save Button, then add an **Action Control** to it.

The Action Control Properties this time is set as such: 

* [ ] Set the **Text** to `Delete`
* [ ] Check the **Align Right** box
* [ ] Under **Icon** the `trash`icon   
* [ ] Set the **Action** to **Delete**

![Delete Action Control Properties](/files/-MBAMjbxw6SeinQHTr-d)

## **Final Page**

Finally, our page looks like this :

![View of the final Object Page](/files/-MBAOBVGgCc54nRkDP-L)

We can now proceed to create our last page for this tutorial.


---

# 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-object-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.