# 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.**&#x20;

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FaTVUeICxhMubfZ1kZaDb%2Fd.png?alt=media&#x26;token=fea11331-6f82-40dc-bdfd-99dac6ab1a4f" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2F6TzP9mHFkbgFVcZLnfZb%2Faa.png?alt=media&#x26;token=21e24673-b0d5-4b5d-822d-d96325349738" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FmLBZU4gmS0tSB2tHcCA5%2F1.png?alt=media&#x26;token=4a585493-c550-49fd-b7e8-afd2f5d4010c" alt=""><figcaption><p>navigateBack action</p></figcaption></figure> <figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FIEVLVYUL0lV5jGz7Ewk9%2F2.png?alt=media&#x26;token=7b84c38d-37d2-4179-81ea-31a2d0f659d6" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FMavnJSrirXPWVb5anCTu%2Faaa.png?alt=media&#x26;token=ed96aa33-da56-4921-a095-8fabc27b9e5e" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FtY5CEegHl1xLd1P349ro%2Faaaaa.png?alt=media&#x26;token=62dab1b8-cff3-49a2-b67a-e133fbc9a891" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FtcmncaU3d8JI4Wbq0Vk8%2Faaaaaaaa.png?alt=media&#x26;token=8f56ff34-f801-467b-b5d0-cca90a96c232" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2F5ghBrRyFV8gk3IJBQ5Q4%2FCleanShot%202023-06-07%20at%2017.20.37.gif?alt=media&#x26;token=b380779c-5fb2-46c1-b36e-b8b790ed4e64" 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="create-the-edittask-component" %}
[create-the-edittask-component](https://docs.goril.app/cookbook/my-first-application/create-the-edittask-component)
{% endcontent-ref %}
