Welcome back! In this fifth lesson you will learn how to work with page navigation and how to pass data between pages.
In the last lesson you built a clickable Card Item component. Let's make it lead to a dedicated details page.
All Noodl projects start with a simple navigation system in place. In previous lessons we went through the basics of navigation. Let's refresh the memory of what is needed for navigation in Noodl:
Multiple page components that each contain a page of your app. In this project you already have a Start Page and a Task Page.
A Page Router node, that works as a container that controls which page component to show. This node is often placed in the App component.
A
The Page Router node is a visual node that acts as a container for pages. Any page you navigate to will be rendered inside the Page Router and fill out the space available.
In the node graph, the Page Router often lives in between a Header and a Footer component. This way they don't need to be inserted (and rerendered) on every page.
If we select the Page Router you can see all the pages that are part of it. You can also set which page you want to act as the start page.
When you create a new page component it automatically gets added to the Page Router. A quick way to create a new page is by opening the Component Panel, then clicking the plus icon and picking page component.
It's time for you to create your very own page!
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.
Open the Component Panel and click the plus icon in the Components section. Name it Details Page, remember that page names are case sensitive.
Every page component comes with a Page node and a Page Inputs node. All children to the page node gets rendered on the page.
With the Page Inputs node, we can create Path and Query Inputs. They are used to send data into a page. You have probably seen this on other websites before, looking something like this: www.webshop.com/products?search=noodles.
We will take a closer look at this shortly, but first lets get a simple interface on this page.
To keep this lesson within a reasonable length we decided to add 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 with Cmd/Ctrl + C and paste with Cmd/Ctrl + V
The Page Inputs node is similar to the Components Inputs node. It allows you to create parameters that can be used to send data into a page when you navigate to it.
There are two different types of parameters: query parameters and path parameters. In this lesson you will be using the latter.
The page parameters makes it possible to use a page component as a template, allowing you to keep the style and structure, but dynamically change the content.
Open the node graph for the Details Page. The name is case sensitive
You now have a navigation system that allows us to click on a card, get its underlying object id, and use that as a path parameter when you navigate to the Details Page.
This allows you to access all the data via the Object in the Details Page component.
When there is a valid id set on a Object node, you can see all the available data when the node is inspected. However, to make it available as outputs, you need to manually create them as parameters by matching the names.
Remember that property names are case sensitive
You will now be navigated to the Details Page when you click a card. But what if you want to navigate back again?
The easiest way is just to use the back and forward controls built in to your browser. The Noodl editor has similar controls next to the Path Dropdown.
If you want to be fancy, you can use the Navigate node to create a custom back control. Let's do that.
You've completed the fifth tutorial! Hope you had fun.
Feel free to navigate back and forth to the details of each card if you have nothing better to do.
Otherwise, it seems about time to start building your own app!
Happy Noodling!