🎉 Home
CUSTOMIZE A TEMPLATE ⏱
LEARN VOLTAPP
https://www.youtube.com/watch?v=w5Z9BsXT0Zw
Most of the time, when you create an app, it contains several pages. To manage the different pages of your app, two nodes are possible:
The screen node is a bit special, when you add a Screen, a Screens node is automatically created above it. If you want to have more than one screen, you just have to add more Screens nodes inside.
Here we add a screen node in app, then a second Screen node in the generated Screens node which allows us to have 2 screens.
To preview all screens, simply click the Screens node. To view a particular screen, simply click on one of the Screens nodes, or one of their child nodes.
The Screens node exposes a switch screens action, allowing to switch from one screen to another. Different attributes can be defined:
In Voltapp, it is possible to have several nodes Screens within the same app and it is also possible to put these nodes in sub-nodes and not only in direct son of app. This will allow us to share a piece of interface between several screens.
Let's take a concrete case: we can have a navigation that is shared between different screens, but without having to copy and paste it into the content of each screen. To do this, you just need to have the Screen node at the same level as the navigation.
Note that, as we saw above, actions, like variables, only exist in their own scope, i.e. their node and their child nodes. As a result, the Navigation node does not have access to the change screen action. Fortunately, there is a solution in Voltapp to interact with this action from the outside: observe variable.
Create a variable "current screen" on App with type single selection and value the different possible screens. Then simply observe the changes on this variable in the Screens node to make the change:
Finally, since the variable is created on App and not screen, it is accessible in the Navigation and its children, so you can change the screen from the Home Button node for example:
If you want to know more about the screen node I recommend you to have a look at the Menu and Carousel templates for example.
The router node works similarly to the Screen node, with two notable differences:
Generally, we use Screen for applications, and Router for web sites.
The operation of routes is a little different from that of screens. Indeed, when we want to change screen, we simply specify which screen we want to display in the block "change screen". In the case of routes, each of them defines a path, which can be chosen by calling the change route block in different ways. For example, if the path defined in the Route node is /about, this is the route that will be displayed for all paths starting with /about. Here are some examples to better understand:
<aside> 💡 The order in which the routes are placed is important. Indeed, as soon as a path matches it is this route that is displayed. For example, the path /about corresponds to the route /about but also to /, so if the route with the path / is placed before in the router, it is this one that will be displayed. It is for this kind of case that it is possible to specify in a route that you want it to correspond exactly to the path (/ corresponds only to / and nothing else).
</aside>
It is also possible to have parameters in the path of a route, for this we use the syntax :name, for example /user/:name. So, when we call change route with /user/pierre or /user/vincent for example, the route will be displayed and will automatically declare a variable routeParams.name, containing the value of the parameter.
There is another type of parameters that can be added to a path, it is the query parameters. They are used to pass additional information via the url, such as a promo code for example.
To add a parameter we use the following syntax:
/product?code=SUMMER_2022
then we retrieve it with the block retrieve parameters of URL :
