Welcome back! In this sixth lesson we will learn how to create UI controls that enables users to fill in data, and how to save and display that data, using Objects and Arrays.
In this lesson we will make a new page with a form for creating new task cards that we will display on the Task page.
Noodl comes with multiple ways of creatin forms for capturing user data. The simplest way is to simple use Noodl core nodes for adding the desired UI Controls for capturing user inputs. Buttons and Text inputs are some we already used, but we can also add dropdowns, sliders, checkboxes, date pickers and more with a few clicks.
We will build a simple form page that enables the user to create their own task cards. But first lets create a new page for the form.
Create a new Page component called Create Card Page
We will start out with wokring on the new page we just created so select that in the path dropdown
Select the /task-page path in the path dropdown
Select the Create Card Page component in the component panel
SSelect the Create Card Page component in the component panel
Add a Text node as a child to the Group node and set its text style to headline, and set its top margin top 24px
Change the text node's text to "Create new card"
We Need to add UI controls to enable users to capture data to descripe the new Task card. For that we need 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, but ideally that should be controlled by the selected Category. We will show how later in this lesson.
Now, lets add UI controls to capture Title, Category, Date and Description.
Add a Text input as a sibling below the text node and set its label to "Title" and top margin to 24px
With the Dropdown node we can quickly add a way for users to select a category for their task.
The dropdown node needs an array of options where each option has a label, being what shown in the UI. and a value, which is the returned value when an option is selected.
Take a look at the video above on how to set it up
Add a dropdown node as a sibling bellow the Text Input and set its label to "Task Category", and give it 16px Margin top
Set it's Items array, so that it has the following options: Work, Study, Shopping, Appointment.
Remember to set the Label in Capitalized and the Value with lowercase as in the video
Besides the core nodes, Noodl also comes with a bunch of pre-made components called Prefabs that can be found in the Node Picker.
Prefabs are often more advanced components that still can be customized as needed, as most of them are built with regular Noodl nodes.
When you clone a prefab it gets added to your component list and can be dragged in to your node graph
In the next step we will be importing the Date picker Prefab, so users can set a Date on new task cards.
Clone the Date picker Prefab and insert it as a sibling bellow the Dropdown.
et the Date Picker's label to "Task Date" and Margin top to 16px
Place another Text input as a sibling bellow the date picker, call it "Task description" and give it 16px margin top
Noodl comes with many nodes for working with data. We have already used the Object node to access data defined in a Static Array node, but we can also create new object with the Create New Object node.
We can create the properties we want our Object to have, and connect the data from the UI controls directly to it.
Let's do that now!
Create a new page called Details Page.
Note: Page names are case sensitive
Create a new page called Details Page.
Note: Page names are case sensitive
Create a new page called Details Page.
Note: Page names are case sensitive
Create a new page called Details Page.
Note: Page names are case sensitive
Create a new page called Details Page.
Note: Page names are case sensitive
Connect the Text output from the Date Picker node to the Description Property of the Create new Object node
Before we can create an object, we need to trigger the "Do" action on the Create New Object node.
Ones the "Do" action is triggered, a New object is created with whatever data is given through the UI controls, and a unique Object Id is outputted which we can use anywhere in our app to access the information.
But we need to store that Id, and that we can do with an Array and the Insert Object into Array node.
Connect the Text output from the Date Picker node to the Description Property of the Create new Object node
Connect the Text output from the Date Picker node to the Description Property of the Create new Object node
Connect the Text output from the Date Picker node to the Description Property of the Create new Object node
Connect the Text output from the Date Picker node to the Description Property of the Create new Object node
We are almost there, but before anything can happen we need to trigger the "Do" action on the Create New Object node. Let's do that with a button, and add another button to navigate back aswell.
In this lesson we will be working on the page called "Task Page" so select that in the path dropdown
Select the /task-page path in the path dropdown
In this lesson we will be working on the page called "Task Page" so select that in the path dropdown
Select the /task-page path in the path dropdown
In this lesson we will be working on the page called "Task Page" so select that in the path dropdown
Select the /task-page path in the path dropdown
Select the Task Page component in the component panel
Select the Task Page component in the component panel
Select the Task Page component in the component panel
Select the Task Page component in the component panel
If we click on a card we will now navigate to our new Details page. So far its a very empty page
Every page component comes with a Page node, and a Page Inputs node. The Page Inputs node, works similar to the Component Inputs node that we already have been using, but with a few differences.
On the Page Inputs node, we can create Path and Query Inputs. This is ways to send data into a page when we navigate to it and encode the data as part of the pages url. We will work more with this in this lesson, but first lets get a simple interface on this page.
To keep this lesson within a reasonable length we had added a component to the project containing a simple UI for our newly created Details Page.
You can go the Details Page Content component and copy all the nodes and paste them into the Details page as children to the Page node.
Copy all the nodes from the Details page content component, and paste them under the page node in the Details Page.
Every page comes with a Page Inputs node, that similar to components Inputs, allows us to create parameters that we can use to send data into a page when we navigate to it.
We can create two different types of parameters. 1) Query parameters, and 2) Path parameters.
Path paramters gets added to the page url, and they become helpful On the Page Inputs node, we can create Path and Query Inputs. This is ways to send data into a page when we navigate to it and encode the data as part of the pages url. We will work more with this in this lesson, but first lets get a simple interface on this page.
On the Page Input node, Create a path parameter called task id
On the Page Input node, Create a path parameter called task id
On the Page Input node, Create a path parameter called task id
On the Page Input node, Create a path parameter called task id
On the Page Input node, Create a path parameter called task id
We now have a navigation system that allows us to click on a card, get it's underlying object id, and parse it as a path parameter when we navigate to the Details Page.
This makes it easy for us to access all the data via the object on the Details page. And based on which card we click,
Let's create the properties on the object node so we can connect the data to our UI.
When we have a valid id set on a object node, we can see all the available data when we inspect node. However, to make it available as outputs, we need to manually create them as parameters by matching the names.
We can navigate to the details page when we click a card, but how do we navigate back again?
First of all most browsers have controls to navigate back and forth. The Noodl editor have similar control next to the path dropdown.
We can also make an explicit way in our UI by using a navigate node again. Let's do that.
You've completed fifth tutorial, we hope you got the gist of it!
Feel free to try navigating back and forth too see the details page change content from each card.
In the next tutorial we will learn how to create a form page to let the user create new Task items.
Happy Noodling!