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

<figure><img src="/files/jp6t6ia4WMRfkYBHWppS" alt="" width="375"><figcaption><p>EditTask task parameter</p></figcaption></figure>

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

<figure><img src="/files/4fsUOXs02BKoq4sMl0An" alt="" width="375"><figcaption><p>EditTask taskObs observable</p></figcaption></figure>

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

<div><figure><img src="/files/AMqkN5uReyTmvAX2cEvo" alt=""><figcaption><p>priority Initial Value Conditional Value</p></figcaption></figure> <figure><img src="/files/07tx5ZEgCXQU5YNXUb64" alt=""><figcaption><p>priority Initial Value Conditional Value</p></figcaption></figure></div>

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

<figure><img src="/files/BPqGktxkF4CqlHTp4Yyt" alt=""><figcaption><p>Init EditTask observable</p></figcaption></figure>

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

<figure><img src="/files/NePLIVZJiOpg7J51Wlpf" alt=""><figcaption><p>Action on cancelButton</p></figcaption></figure>

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

<figure><img src="/files/vKzmncEACdhL9MecOlns" alt=""><figcaption><p>saveButton Form condition</p></figcaption></figure>

<figure><img src="/files/EREjQhH36UHvSGgjpQzo" alt=""><figcaption><p>save action</p></figcaption></figure>

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

Between the two commented line add the following import :&#x20;

```dart
import 'package:todo_doc/models/models.dart';
```

Set the following code :&#x20;

```dart
  List<String> 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\<String>**, the parameter **comment** being the **Widget State comment Force Not Null** and the parameter **task** being the **Observable taskObs -> (Task).**

<figure><img src="/files/wN3s9nn6xXMdQYmnT9Ph" alt=""><figcaption><p>addComment is not empty condition</p></figcaption></figure>

<figure><img src="/files/egnx4UigqSRieFL1ePFg" alt=""><figcaption><p>updateTaskObservable action</p></figcaption></figure>

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

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.

<figure><img src="/files/lH1a4fAifS3LasELDDay" alt=""><figcaption><p>editButton showEditTask action</p></figcaption></figure>

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

<figure><img src="/files/nfTJdkVChpF0wIqyGmjj" alt=""><figcaption><p>showEditTask Action Output null condition</p></figcaption></figure>

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

<figure><img src="/files/okhdKC2Zj8JPwBVL6mCg" alt=""><figcaption><p>updateLocalState Action</p></figcaption></figure>

15. 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/6RQgJlTOPO3RMA2se1Hj" alt=""><figcaption><p>updateObservable Action</p></figcaption></figure>

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

<figure><img src="/files/4KqZ7yWOw49XK8UfxAh9" alt="" width="335"><figcaption><p>Edit a Task</p></figcaption></figure>

Congratulations ! You have completed the ToDo application tutorial !


---

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