This third lesson will be all about components, and why they might be the most powerful tool in you Noodl toolbox.
In the last lesson you created a nice card item, let's see how we can make it into a reusable Component.
Components are used to break your project into smaller building blocks. This pattern has two main benefits:
1) They can be reused across your app, so you don't have to rebuild the same UI or logic in multiple places. This is important when we want to make our app data driven.
2) It's a good way to keep your project organized, so you don't end up with huge, complex node graphs.
In the Component Panel in the Sidebar you get an overview of all the components in the project, and from here you can also create new ones.
Noodl has four types: visual, logic, page and cloud function components. You will be using visual components in this lesson.
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 can turn a set of visual nodes (like our Card Item) into a visual component to make it reusable. Your task app will include multiple tasks with a Card Item each, so it's a perfect case to turn into a component.
Creating a new visual component is done by clicking the plus icon in the Component section of the Component Panel.
In this lesson we will be working on the page called Task Page so select that in the Path Dropdown.
Create a new visual component by clicking the plus icon in the component panel and name it Card Item.
When creating a new visual component it contains a single Group node by default.
Components can only have one visual hierarchy, so you need to delete the default Group before pasting in the card related nodes from the Task Page.
A component can only have one visual hierarchy, so you will need to delete the default Group node if you want to copy and paste from another node graph.
Select the Card Item Group node. Cut with Ctrl/Cmd + X. Paste with Ctrl/Cmd + V.
Placing an instance of a component into the node graph is as easy as dragging the component from the Component Panel into the node graph of the component or page we want it to be in.
You can also find all your components in the Node Picker.
Copy with Cmd/Ctrl + C and paste with Cmd/Ctrl + V
When you changed the bottom margin on the Card Item component that change applied to all instances of Card Item across your app. This is great for reusability purposes. However, sometimes we want certain properties to be unique for each specific instance, like the displayed text, the image and the background color in our case.
You can achieve this by using the Component Input node. This node allows you to create ports on the component. The ports can be connected to the input properties that you want to overwrite.
This allows you to create your own Property Panels for your components: When a Component Input port is connected it will show up as an input property on the Card Item component node. It will allow you to overwrite the components default values.
Remember that port names are case sensitive
All the ports created in the Component Inputs node are now exposed on the component wherever it is used.
This means that you can style each instance of the component individually without those changes being applied across the whole app.
You can add more ports at any time to control more properties.
You've completed this tutorial, we hope you got the gist of it!
Feel free to continue change the different input properties to customize the cards even more. e.g with new paddings or borders.
In the next tutorial you will learn how to generate this list of cards with a data driven approach.
Happy Noodling!