Add Actions in CreateTast component

In this task, you will add all the actions mandatory to correctly create a task.

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.

isPriorityVisible Observable

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

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

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

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

navigateBack action

navigateBack action

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.

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

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

Condition

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

addTaskInList action

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.

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

updateObservable action

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.

Create Task Test

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

Create the EditTask component