# 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2F2fwvPhu8yV4CY7Bnl3hm%2Ftodo_createobs.png?alt=media&#x26;token=4b8e11db-67f9-4c26-9109-a1a931785d54" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2Fd6xJOvf9KS6UjvvfwKYB%2Ffx.png?alt=media&#x26;token=fe08fe61-d86a-4b44-bdff-4ed2aa960e81" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2F5eI4yWanGDyrpraavjb7%2Ftodo_action.png?alt=media&#x26;token=3338f920-0def-4cdc-af4f-830461c5e607" 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](https://docs.goril.app/main-pages/architect/toolbox "mention") 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FsS1eYO1CvPOF9v0DB1qy%2Ftodo_layout.png?alt=media&#x26;token=8222020f-ca18-4e7b-8778-3dafd44c10f8" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FW53CV6B7wKEmQROgM8ww%2Ftodo_generate.png?alt=media&#x26;token=181002eb-8843-4ce3-a3ea-8734e25683b6" alt=""><figcaption><p>Generate ListView item with our taskList observable</p></figcaption></figure>

{% content-ref url="complete-the-homepage-layout" %}
[complete-the-homepage-layout](https://docs.goril.app/cookbook/my-first-application/complete-the-homepage-layout)
{% endcontent-ref %}