Enable task creation

This page outlines how to build logic for your todo list application that enables users to create new tasks:
1.Enter Logic view and open the Libraries panel.
2.From the Design References section, drag-and-drop the Text Input reference into the Logic panel.
3.Select Text Input, and open the quick selection Actions menu.
4.Click the following actions to add them to the Text Input reference:
onEnter: Submits the text input value when the Enter key is pressed.
clear: When called, resets the Text Input value.
5.From the Design References section, drag-and-drop the Button reference into the Logic panel.
6.Drag-and-drop a Combine component into the Logic panel.
7.Connect the following nodes:
(Text Input) onEnter > (Combine) call
(Text Input) getValue > (Combine) param
(Text Input) getValue > (Combine) param
(Button) onClick > (Combine) call
These connections set the Combine component's param value to the Text Input's value, and calls the Combine component when the Add task button is clicked or the Enter key is pressed.
8.Drag-and-drop a Sequence component into the Logic panel.
9.Connect the following nodes:
(Combine) call > (Sequence) call
(Sequence) call 2 > (Text Input) clear
When the Combine component is called, these connections call the Sequence component, which clears the Text Input value.
10.From the Design References section, drag-and-drop a Task List reference into the Logic panel.
11.Double-click into Task List, and drag-and-drop a reference to its child Text component into the Logic panel.
12.Build the following node connections:
setLabel > onConstructed: Sets the Text component's label when an instance of the Task List is constructed.
label > Outside the Task List boundary: Enables you to access the label node outside the Task List constructor.
13.Click Default flow to return to the main flow level, and build the following connections:
(Sequence) call 1 > (Task List) constructor: When the Sequence component is called, constructs an instance of the Task List.
(Combine) param > (Task List) Text.label: Sets the Text component's label value to the Combine component's param value.
14.Click the play icon to preview the app, and ensure you can add tasks to your list.
Congratulations! You can now add tasks to the todo list. To continue adding interactivity to your app, continue to the Add a completed task counter page.
Create a layout
Add a completed task counter
Last modified 12d ago