> For the complete documentation index, see [llms.txt](https://docs.goril.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.goril.app/cookbook/my-first-application/add-actions-in-createtast-component.md). # 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.**

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.**

Set UpdateObservable isPriorityVisible action

Now the UI is correctly configured, we have to handle the creation of the task. 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.)*

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

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\)** local state. Set the **Update Type** to **Add To List** and the **Update Source** to **Action Output showCreateTask -> Task? Force To Null.**

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\)** and the **Update Type** with **Set Value.** Set the **Update Source** to **Local State taskList -> List\.**

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.

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 %}