Links

Adding interactivity

Use the Flow Panel and the Actions tab in the Inspector Panel to hook up interface nodes and add interactivity to your application. After this tutorial you have a fully functioning to do list app! The next two tutorials are just to explore using more complex logic.
Note: The "Split" Element has been renamed to be the "Sequence Element"

1) Edit the Methods In Text Input

The Text Input element comes with clear, onEnter, and onChange actions available by default. We don't want to use onChange so we can click the trashcan in the Actions tab of the Inspector Panel to clean up our element:
At some point we will also want to get the value of this text input element, so let's scroll through the available actions and expose getValue:

2) Combine Actions for onClick and onEnter

We want the same thing to happen when you click the button or when you hit enter when the text input is selected so let's drag and drop the Combine element in to the Input Wrapper element and drag and drop interface nodes from onEnter and onClick to the Combine element.
In both cases, we will also want to connect the value of the text input to the param property next to the call.

3) Add the Sequencer Element to Create Multiple Calls

When we submit, we will want to first sent out the value of the Text Input to something that will make a task and then clear the Text Input element. Here we can use the Sequencer element to ensure the order of events is what we expect:

4) Convert Task to a Class

We have an instance of the Task element in our Task List, but we want it to be created dynamically so we can convert it to a class which will allow it to be constructed by a call.

5) Add Actions to Task and Text

We will want to set the label of the task once it is constructed, so we are going to find onConstructed in the Actions tab of the Task and expose it. Then we are going to expose setLabel for the Text element and link that up with onConstructed, sending the value outside of this container as we will be pulling that from the Text Input from the Input Wrapper.

6) Destroy Task On Click

While we're in the Task element, let's also make this button destroy the task- this will let us "check off" tasks from our list and delete them as we do. We need to pull the destroy action from the Task and link that up with the onClick action from the Button:

7) Bring Calls and Data Forward

We want to link these calls to the Text Input so let's pull them out a level:

8) Final step

Now all we need to do is connect the data from the Text Input to the value we want to set for the Text label in the Task element, and then connect the calls so that the events from Text Input are triggering the construction of a task:
Now you have a fully functioning to do list app!

Congratulations!!