Welcome back! In this sixth lesson you will learn how to use the UI nodes to build a form, save the users data and display that data somewhere else in the app.
You will be using the "objects in array" method that you learned in the previous lesson, but this time you will not only read, but also write to it.
We will be working on a new page called "Create Cards Page" where we will build a form for creating new task cards that we will display on the Task page.
Noodl comes with multiple ways of capturing user data. The simplest way is to build a form with the UI controls in Noodls core nodes.
You already have some experience with Buttons and Text Inputs, but you can also add Dropdowns, Sliders, Checkboxes, Date Pickers and much more.
In this lesson you will build a simple form page that enables the user to create their own task cards. Let's get in to it!.
If you look in the Component List, you will find a new page called Create Card Page. It contains the start of the card creation UI. It will be your job to finish it. We'll guide you through the process.
You will be adding a few new inputs and connect them up to some data nodes to store the data.
Let's navigate to the page and check out what's already there.
During this lesson, you will be given multiple tasks. Spot them in the lesson timeline by the Task label.
If you get stuck you can get a hint by clicking the card in the timeline.
Some of the nodes graphs will already be set up for you beforehand. This is to keep the lessons short so that you can focus on learning one concept at a time. If it feels like magic at times, don't worry, It's just a concept you will learn in a later lesson.
You will start with wokring on the new page we created for you so select the /create-card-page path in the Path Dropdown.
Select the Create Card Page component in the component panel to open its node graph.
If we take a look at the page we can see two Text Inputs, one for capturing the name of the task, and one for capturing the description.
There are also a few buttons. One is called Cancel and will navigate back to the Task Page. The other is called Create Task. You will use that a little later to trigger the logic to create a task.
A thing that is missing is an input that the user can use to set the category of the task. This is a perfect use case for the Dropdown node.
The Dropdown node is perfect for cases where the user needs to pick one of multiple predefined values.
The node needs an array of options. Each option needs a label (the text shown in the UI), and a value (that is sent from the node when an option is selected).
Take a look at the video above on how to set it up.
Take a closer look at how the array looks in the video above.
Remember to set the Label in Capitalized and the Value with lowercase as in the video
Besides the core nodes, Noodl comes with a bunch of pre-made components called prefabs. They are advanced components, built with regular core nodes. You can customize them to fit your needs, just like the components you build yourself.
Prefabs are not in your component list by default, but can be cloned through the Node Picker. When you clone a prefab a new copy of it gets added to your component list and can be dragged into your node graph.
In the next step we will be importing the Date Picker prefab, so that the user can set a date on their new task cards.
You have previously used the Object node to access data defined in a Static Array node. Since the users will be creating the data themselves a Static Array will not do. Instead, you can use the Create New Object node.
On this node you define the properties you want the Object to have, connect the UI controls data outputs to the property inputs, and send a signal when you want the new Object to be created.
It's easier to show then tell, so let's set it up!
Remember that names are case sentitive
Now we have both the UI and the Object to capture a Title, a Category, a Date and a Description.
In the previous lessons we also worked with an image and background color for each task. Ideally those properties should be controlled by the selected Category. We will get back to this in a bit.
First, let's connect the UI controls up to the Create New Object node.
To actually create an object, we need to trigger the Do action on the Create New Object node.
When the Do action is triggered, a new object is created with whatever data is on the inputs of the Create New Object node. The created Object also gets a unique id that can be used anywhere in your app to access the information.
To easily find the Object id you can store the objects in an array, using the Array and Insert Object Into Array nodes.
You're almost there, but before anything can happen you need some way to trigger the Do action on the Create New Object node. Let's do that using the click event from the Create Task button.
Now you can create new tasks, but seeing them requires some manual navigation. It would be nice that could happen automatically.
The Insert Object Into Array node has a success output that can be used just for this!
Let's hook it up to a Navigate node and try it out.
Now the app automatically takes you to the Task Page when a new task has been created, but where are all the created tasks?
Before we can see them, the Static Array node needs to be swapped out for an Array node with the same id (Tasks) as the Insert Object Into Array node.
Because Array ID's are global we can access the data of an array everywhere we have an Array node with the same Id.
A quick note on Arrays and Objects is that they only hold data locally and are reset when the page or project is refreshed. We will go through how to make your data persistant in a later lesson.
For now, let's go and swap out the Static Array node with an Array node.
Select the Task Page component in the component panel to get to its node graph
Great Job! You now have a working flow. Clicking the plus button will navigate you to the Create Card Page. From there you can create a new task and navigate back to the Task Page to see the task cards.
However, the tasks are still missing an image and a color, and the date value is not formatted. When it comes to color and image, we don't want the user to pick that in the form. Rather we want the selected category to set what image and color to show.
We will save those last missing pieces for the last lesson.
You've completed sixth tutorial! The longest one yet.
See you in the last lesson, where you will learn how to work with the States node and logic components.
Happy Noodling!