# Create the base HomePage Layout

{% hint style="info" %}
To see the **Function**, **Preview** and **Delete** buttons, hover the desired field.
{% endhint %}

1. In the **Explorer** section, select the **HomePage** top widget and in the **Settings Panel**, click on the **Add** button below **Observables.**
2. Fill the field **Name** with taskList.
3. Select **Task** as **Field Type** in the bottom of the dropdown, in the Custom type section.
4. Click on **List.**

 The Observable is created as shown below.

<figure><img src="/files/Hu2UcwkDr7leUKHhlyxE" alt="" width="375"><figcaption><p>Created Observable</p></figcaption></figure>

Because we can store our Tasks in Local State, we have to initialize the observable **taskList** with the current values in the local state variable **taskList**.

1. Open the **Action Flow Editor** of **HomePage.**
2. Click on **Add Action**.
3. An **Action 0** appears, click on it.
4. On the **Define Action** right panel, fill the **Action Name** with "setTaskList".
5. Select **Set Observable** as **Type.**
6. In **Set Observable Source** select the observable we have created on the HomePage **taskList - (List\<Task>).**
7. Let the **Update Type** as **Set Value** because we are setting the observable with a value.
8. When you **Hover** on the **Update Source** section, you can click on a <img src="/files/o9s2eiwFNpxARmjIenO5" alt="" data-size="line"> button that appeared.\
   It allows us to select a **Source Value** from dynamic fields.
9. Select **Local State** instead of **From Value** in the dropdown.
10. The field below allows us to select which **Local State** we want to use, select **taskList -> List\<Task>.**
11. Click on **Save.**

<figure><img src="/files/qNB6dGJPVisdkGSK2DaW" alt=""><figcaption><p>Set Observable Action</p></figcaption></figure>

Now that the observable is created, and the HomePage initializes it with the stored values of the Local State. We have to create our layout.

1. In the [Toolbox](/main-pages/architect/toolbox.md) section, search and drag and drop a **ListView** in the Body of the Scaffold.
2. Add a **Card** in the Children of **ListView.**
3. Add a **CheckboxListTile** in the Child of **Card.**
4. Add a **Text** in the Title of **CheckboxListTile.**
5. Add a **Column** in the Subtitle of **CheckboxListTile.**
6. Add a **Text**, then a **Row** below it in the Children of **Column.**
7. Add a **Flexible** in the Children of **Row.**
8. Add a **Text** in the Child of **Flexible.**
9. Add an **Icon** and a **Text** below **Flexible** in **Row.**
10. Add an **IconButton** in the Secondary of **CheckboxListTile.**

Without any theming, naming and settings it should looks like shown below.

<figure><img src="/files/t8LsugHgWXaTARBrS324" alt=""><figcaption><p>HomePage initial layout</p></figcaption></figure>

We have created a **ListView** with a defined layout for any item in it, now we have to set the **Data Source** of it with our **taskList** observable.

1. Click on **ListView** and in the **Settings Panel**, select the second tab, i.e the **Generate Children From Variable** tab.
2. Set the **Type** of the **Data Source** as **List\<Task>.**
3. Change the **From Value** to **Observable.**
4. Select the **taskList -> (List\<Task>)** in the list of observable.
5. Let the following field to empty, because we want a list of Task, and not a list of a property of Task like a list of the Title of all the Task.
6. Click on **Save.**

Now the **ListView** will be populated with the data from our observable. To have a visual preview, the list view shows in the **Application Preview** multiple items to perfect our layout.&#x20;

<figure><img src="/files/apAkhoFA4TQBLjPrYSDe" alt=""><figcaption><p>Generate ListView item with our taskList observable</p></figcaption></figure>

{% content-ref url="/pages/jD7DyWvRbOVbJ5bdFE6D" %}
[Complete the HomePage Layout](/cookbook/my-first-application/complete-the-homepage-layout.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.goril.app/cookbook/my-first-application/create-the-base-homepage-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.