This lesson will guide you through the steps to create a list in Noodl that's based on a data set.
You'll learn some important concepts along the way, including how to create reusable components and work with data.
Click "next" to get started!
A list is built out of three elements:
1. A dataset with data to populate our list with items
2. A visual component that controls how the list item looks and behaves.
3. A repeater node that creates one list item component per data record
Let's start by looking at the data
There are many ways that we can get datasets into our project. An easy way is to use the Static Array node.
This node acts as a text file and supports two standard data formats, JSON and CSV. The node in this lesson comes with a small dataset following the JSON format.
The dataset contains images from the image site Unsplash.com along with the names of the artists behind the images.
We learned how to break the ui into reusable components in the last lesson. But another powerful way for us to use components is as visual templates for data-driven content.
To accomplish this we need another node called the Repeater node.
With our new List item component, we can insert multiple instances into our layout.
We can use our dataset from the Static Array node to do so, and generate instances from each record in the data.
This is handled by the Repeater node. A Repeater is placed in the visual hierarchy, and we can set what component the repeater should repeat from the property panel.
Then we'll connect the data from the Static Array node to the Repeater's items input.
Let's continue to the next step to create a Repeater.
A few visual nodes have already been added to this lesson. They define a layout of an image and a text node with the artist's name.
We want to use this layout as a list item, and repeat it for each record in our dataset. Let's start with extracting the layout into a new visual component.
Creating a visual component is done by clicking the "+" icon in the component section of the sidebar. Let's do that in the next step.
During this tutorial, you will be given multiple tasks. Spot them in the tutorial timeline by the “Task” label.
Click on the card to get a hint of how to complete the task.
Create a new visual component by clicking the "+" icon in the component panel and naming it List item.
A component can only have one visual hierarchy, so we will need to delete the default Group that came with the Visual component when we created it.
Cut and paste the nodes that make up the image layout and insert them into our newly created component.
With our new List item component, we can insert multiple instances into our layout.
We can use our dataset from the Static Array node to do so, and generate instances from each record in the data.
This is handled by the Repeater node. A Repeater is placed in the visual hierarchy, and we can set what component the repeater should repeat from the property panel.
Then we'll connect the data from the Static Array node to the Repeater's items input.
Let's continue to the next step to create a Repeater.
Now we got 5 images! One for each image + author pair in the dataset.
However, the repeater node is repeating our List item component with the same image and text in every instance.
Our next step is to connect the data values in the dataset to the visual nodes in our List item component. To do that we will be using an Object node.
The Object node lets us access data from objects. The Static array node automatically creates data objects for each record in the dataset. Each object gets a unique identifier.
When we use an Object node inside of a component generated by a Repeater node, the Repeater can provide us with the identifier for each of the data objects.
Once we have set the Object node to get its Id from the Repeater, we can hover over the object node and it will show its content.
We'll be setting this up in the next step.
It's important to note that when we work with data, especially data shared between components, we need to have the Preview window running.
This is because logic and data is only active when the Preview window is running.
When we hover over the object we can see the available data properties. We send these properties through outputs on the Object node by clicking the plus icon in the Object's property panel
Type in the property name so it's identical to what we have in the dataset. It's case sensitive.
Now the data properties are available as outputs and we can connect them to other nodes in the component.
Sometimes we need to refresh the preview window in order to see the latest changes. Just a friendly reminder :).
You've completed this lesson, we hope you liked it!
To take your Noodl skills to the next level we recommend our video tutorial that shows how to build a to-do app with a real backend.
Happy Noodling!