Creating any website or web application is almost unthinkable without navigation. Users must navigate between pages, open different site sections, and receive various information.
Page data
But before looking at navigation itself, it’s worth understanding what information you can get about a page in general and what a URL can consist of. To do this, you can use the Get Current Page block and see what data it produces.
- URL - the address of the page in its usual form. For example - https://vdjyien-app.apms.io/admin/someurl/
- Page - the internal identifier of the page, which is used in AppMaster business processes. It consists of 22 characters, a random set of letters, and numbers.
- Title - page title. Its name in the human-readable form.
- URL Params. A page can be created so that its address is not strictly fixed but also includes variable values. For example, a page can display a list of articles in a specific section, and the identifier of this section is just indicated in the URL as a parameter.
- Query Params. Additional query parameters are written at the end of the URL after the “?” sign. For example, for a page with a list of articles, the parameters “?_limit=12&lang=en” might indicate that only 12 articles in English are required.
For example, imagine a page that displays a list of blog articles. Its URL is given as “/blog/:theme/:author.” The symbol “:” indicates that the value specified after it is a parameter. As parameters, it takes identifiers of the article's topic (theme) and its author (author).
To navigate to this page, you need to use the Navigate block in the business process.
The parameters correspond to those that were parsed earlier in the Get Current Page block. In this case, the page's actual title does not matter for navigation since the page itself is specified as an internal identifier (you can select it from the list of pages).
If the page does not have any parameters, then navigation can be extremely simple; just select the desired page from the list provided. But in this example, there are parameters that must be passed to the Navigate block.
Creating a source page for navigation
Consider the use of parameters on a specific example. To do this, we will create a separate page from where we will need to go to the target page in the future. Let's add two Select elements to this page (one for selecting from the list of topics, the second for the list of authors) and fill them with test values.
After that, you need to set up a workflow for the Navigate button by clicking on which navigation to the landing page should work. This process starts by getting the selected values from the Select blocks.
The next step is to populate the Key-Value virtual models. Their array is used to pass the necessary parameters to the Navigate block. The model itself consists of a key (Key), which is the name of the parameter (in this example, theme, and author), as well as its value (Value, the direct name of the selected topic, or the name of the author).
Please note that many characters cannot be used in the URL, including the space character. Therefore, a name written as “Frank Paulsen” in the URL will be automatically converted to “Frank%20Paulsen”. URL Encode and URL Decode blocks can be used to encode and decode to URL standards. In this example, for greater clarity and beauty of the URL, we use the Replace string block and independently replace the space with the “-” sign, presenting the name as “Frank-Paulsen”.
The final step is to merge the generated key-value pairs into a single array to pass as a parameter to the Navigate block.
Now, when you click on the button, you will go to the page https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/
You can verify that its URL consists of both a constant part (https://vdjyien-app.apms.io/admin/blog/) and a variable (No-code/Frank-Paulsen/) that was formed from values selected on the previous page.
Using URL parameters to manage content
The next task is to use the received URL parameters to change the page's content. These parameters can be used, for example, to form a GET request to the database, but in our example, we will simply display their value on the page. To do this, let's add two containers to the page with the corresponding Label.
Let's set up a business process based on the onShow trigger in one of the Label. Its task will be to parse the URL, get its parameters and display it on the page. To do this, we use the Get Current Page block and get the value of each parameter in a loop.
Next, through the Switch block, we get the value of the parameter and display it in the corresponding Label. At the same time, for the Author parameter, we will reversely replace “-” with a space.
Now when navigating to a given page, not only its static address will be used, but also URL parameters that affect the actual display of content on the page.
Using query parameters
In almost the same way, you can add query parameters (Query Params). Their key difference from URL parameters is that they are optional. In this example, the URL necessarily includes an indication of what information should be displayed on the page (which thematic section and which author), and additional parameters make the necessary clarifications. For example, you can use the limit and offset parameters to organize pagination and set exactly how many records to query from the database and from which record to start the output.
Let's add two new fields to the start page - Input (Integer). We will write the limit and offset parameters in them.
Let's make the necessary additions to the navigation button business process. Let's form an array of Query Params with limit and offset values.
The last step is to add elements with information from the request parameters, as well as complete the business process for the target page.
The result should be a URL like this:
https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12
The application implements navigation with URL parameters and query parameters and dynamically determines the content of the target page depending on these parameters.
