# Add Actions in CreateTast component

In order to create a task, we first have to ensure our widgets interacts well together.

1. Select the Top widget **Create Task** and in the right **Settings panel** add an **Observable** named "isPriorityVisible" with **Field Type bool.** 

<figure><img src="/files/DtJdBwJBuDIpnYE6zIMO" alt="" width="375"><figcaption><p>isPriorityVisible Observable</p></figcaption></figure>

2. Select **ChoiceChip** and in **Conditional Visibility** add a **Single** condition that evaluates **IF** the **Observable isPriorityVisible -> bool** is **Equal To True.**

This set the **Visibility** of the **ChoiceChip** to **True** when the value of the observable **isPriorityVisible** is **True.** You now have to change the value of this observable when the flag priorityButton is being clicked.

3. Select the **priorityButton** and open the **Action Flow Editor.** Add an action with **Type Set Observable.** Choose **isPriorityBool - (bool)** in the **Source** and let the **Update Type** as **Set Value.** In the **Update Source** add a **Conditional Value** that have **2** conditions : **IF** the **observable** **isPriorityVisible** value is **Equal To True** **THEN** the value is **False.** The second is the opposite : **IF** the **observable** **isPriorityVisible** value is **Equal To False** **THEN** the value is **True.**

<figure><img src="/files/NWg977itlRvC5wLmIwZL" alt=""><figcaption><p>Set UpdateObservable isPriorityVisible action</p></figcaption></figure>

Now the UI is correctly configured, we have to handle the creation of the task.&#x20;

4. Select **createTaskButton,** open the **Action Flow Editor** and add a **Conditional Action.** This is a **Single** condition that evaluates **IF** the **Widget State Form form -> bool** is **Equal To True.**
5. In the **True** branch add an action named "navigateBack" with the **Type Navigate Back.** Enable **Return Value** and set the **Return Type** to **Task.** Let the **Return Value** to **From Value.** For the **title** put the **Widget State title title -> String?, Force Not Null** value because in the **Task** model, the title is non optional. Do the same for the **date.** For **description** don't **Force Not Null** because it is optional is the model. Let **isDone** to false because a created task is not already done. For **priority** set a **Conditional Value** that evaluates **IF** the value of **Widget State ChoiceChip IS NOT NULL THEN** the value is **Widget State ChoiceChip Force Not Null.** For **comments** click on **Add Value** then delete the **Value 0** created because we want to initialize the comments with an empty list. *(See the complete action shown below.)*

<div><figure><img src="/files/AOuZU0N7PTbTCRgN1kaa" alt=""><figcaption><p>navigateBack action</p></figcaption></figure> <figure><img src="/files/IBC1kj3kLrYYvAJmLBrR" alt=""><figcaption><p>navigateBack action</p></figcaption></figure></div>

Now, the CreateTask component return a task and navigate back to the HomePage. But we have no action to actually open this component and handle the returned task.&#x20;

6. In the **HomePage** select the **addTaskButton,** open the **Action Flow Editor** and create an action named "showCreateTask" of **Type Show Bottom Sheet.** Select your **CreateTask** component and set a **Return Value** of type **Task?.** The return value is nullable because the user can dismiss the bottom sheet without creating a task. Click on **Save** on the bottom on the panel.
7. Below add a **Condition** that evaluates **IF** the **Action Output** of **showCreateTask->Task? IS NOT NULL.** Let the **Default Value** empty.

<figure><img src="/files/as3w2EeNmL1i53gnCxjx" alt="" width="375"><figcaption><p>Condition</p></figcaption></figure>

8. In the **True** branch of the condition, add an action named "addTaskInList" of **Type Update Local State.** The **Update Local State Source** is your **taskList - (List\<Task>)** local state. Set the **Update Type** to **Add To List** and the **Update Source** to **Action Output showCreateTask -> Task? Force To Null.**&#x20;

<figure><img src="/files/EuFJJW6OcRHD0qcvIG3a" alt="" width="375"><figcaption><p>addTaskInList action</p></figcaption></figure>

Now your Local State **taskList** is updated with the new task just created, but to see any visual changes you have to update the observable.

9. Add an action named "updateObservable" of type **Set Observable.** Set the **Observable Source** with your observable **taskList - (List\<Task>)** and the **Update Type** with **Set Value.** Set the **Update Source** to **Local State taskList -> List\<Task>.**

<figure><img src="/files/b4Rp2mzhvCzSc5LNmIvj" alt="" width="375"><figcaption><p>updateObservable action</p></figcaption></figure>

At this point, you created a CreateTask component that return the Task when completed and update the HomePage with the result.

We can now delete the default values put on the local state **taskList** and test the application.

<figure><img src="/files/1CvljJKnK6fDjljqDq1w" alt="" width="334"><figcaption><p>Create Task Test</p></figcaption></figure>

The next step is to create the EditTask and update the HomePage when a task is updated.

{% content-ref url="/pages/XShWRN1r3Ds40OuUXel9" %}
[Create the EditTask component](/cookbook/my-first-application/create-the-edittask-component.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/add-actions-in-createtast-component.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.