> 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-edittask-component.md). # Add Actions in EditTask component In order to update a task, we first have to ensure our widgets interacts well together. To update a task we have to make sure the EditTask component is opened with a Task in parameter and the modification update the global layout of the view. 1. Select the top widget **EditTask** and add a **Parameter** named "task" of **Type Task.**

2. Add an **Observable** named "taskObs" with **Field** **Type Task.**\ Set the **Default Value** of **title** to "Default", of **date** to **Now** in **DateFormat** dropdown, of **isDone** to **False,** of **comments** to an empty list by clicking on **Add Value** then deleting the **value 0.**

3. Select the widget **title** and set an **Initial Value** of **Observable taskObs -> (Task) title.** 4. Select the widget **description** and set an **Initial Value** of **Observable taskObs -> (Task) description.** 5. Select the widget **date** and set an **Initial Value** of **Observable taskObs -> (Task) date.** 6. Select the widget **priority** and set an **Initial Value** of a **Conditional Value** that evaluates the value of **Observable taskObs -> (Task) priority** value to set a **Static From Value** of it.\ The **priority** can have the values **1, 2, 3** or a **Default Value** of **0.** (see capture below).

priority Initial Value Conditional Value

7. Select the **Column** and set a **Conditional Visibility** to **True** if the **Observable taskObs -> (Task) comments Is Not Empty.** \ In the **Generate Children** tab, set the **Data Source** as **Observable taskObs -> (Task) comments.**\ Select the **Text** inside and set the **Text** as **Combined Text** with two **Sources** : "-" and the **Generated Variable comments -> String.** The layout is correctly updating itself on changes, now you need to add actions to the component. 8. Add an **Action** to **EditTask** component named "setObs" that **Set Observable taskObs - (Task)** with the **task -> Task** from the **Parameters.**

9. Add an **Action** to **cancelButton** that **Navigate Back.**

10. Add a **Conditional** **Action** to **saveButton** that evaluates the **Widget State Form form.**\ In the **True** branch, add an **Action** "save" **Navigate Back** that **Return a Task Value From Value.**\ The **title** is the value of the **Widget State title Force Not Null.**\ The **date** is the value of the **Widget State date Force Not Null.**\ The **description** is the value of the **Widget State description.**\ The **isDone** is the value of the **Observable taskObs -> (Task) isDone.**\ The **priority** is a **Conditional Value** that evaluates **IF** the **Widget State priority Is Not Null** then the value is the **Widget State priority Force Not Null.**\ The **comments** is the value of the **Observable taskObs -> (Task) comments.**

Before getting to the next step we have to add a **Custom Function** named "addComment", that takes **two** parameters : a **String comment** and a **Task task.** The **Return Type** is a **List\.** Between the two commented line add the following import : ```dart import 'package:todo_doc/models/models.dart'; ``` Set the following code : ```dart List comments = List.of(task.comments); comments.add(comment); return comments; ``` We can now use this function everywhere in the application. 11. Add a **Conditional Action** to **addComment** that evaluates **IF** the **Widget State comment** **Is Not Empty.**\ In the **True** branch add an **Action** named "updateTaskObservable" of **Type** **Set Observable,** the **Observable Source** is **taskObs - (Task),** the **Update Type** is **Set Value**.\ The fields in **Update Source** are the same as 10. except for the **comments.**\ In this case **comments** is a **Custom Function addComment -> List\**, the parameter **comment** being the **Widget State comment Force Not Null** and the parameter **task** being the **Observable taskObs -> (Task).**

Now, the EditTask 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. 12. In the **HomePage** select the **editButton,** open the **Action Flow Editor** and create an action named "showEditTask" of **Type Show Bottom Sheet.** Select your **EditTask** component and set **Generated Variable itemTaskList -> Task** as **Parameters** and set a **Return Value** of type **Task?.** The return value is nullable because the user can cancel the bottom sheet without updating a task. Click on **Save** on the bottom on the panel.

13. Below add a **Condition** that evaluates **IF** the **Action Output** of **showEditTask->Task? IS NOT NULL.** Let the **Default Value** empty.

showEditTask Action Output null condition

14. In the **True** branch of the condition, add an action named "updateLocalState" of **Type Update Local State.** The **Update Local State Source** is your **taskList - (List\)** local state. Set the **Update Type** to **Update Item At Index,** the **Item Index** is **From Generated Index** and the **Update Source** to **Action Output showEditTask -> Task? Force To Null.**

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

Now, you should be able to edit a task, and have the same result as shown below.

Congratulations ! You have completed the ToDo application tutorial !