Skip to main content
URL Parameters

Learn how to use URL Parameters in your Frontly app for more advanced configuration.

Patrick avatar
Written by Patrick
Updated over a week ago

We highly recommend reading the following 2 related articles before the URL Parameters article to fully understand our data system:


What is a URL Parameter?

URL parameters, also known as query parameters or query strings, are used to pass information between a web page and a server. They are appended to the end of a URL after a question mark (?) and are typically in the form of key-value pairs, separated by an ampersand (&).

Consider the following example URL:

You have a single parameter key 'id' with the value of '45'.


Consider the next example URL:

There are now multiple parameters in the same URL, where 'team' key has the value 'marketing' and the 'company' key has the value 'Apple'.

Notice that for the first param, you use the ? symbol, but for all subsequent params, you use the & symbol.


How do you use URL Parameters in your app?

Values like the ones shown above are stored in the URL parameters and can be retrieved for many use-cases in Frontly. For instance, they can be used to dynamically display values within your pages or be used in Hidden Filters to create dynamic data filters.

Below is a real life example of how these URL parameters can be used:


Projects Example

Page 1: Projects List

Here is a Table block with a list of different projects. The goal is to create a reactive flow where clicking a project will lead your users to another page which will reveal on more details about the clicked project.

Set the table's Record Click Action to the Navigate to Page one. Clicking a record will navigate your users to the 'Projects' page while storing any URL parameters and values as well.

In the action's URL Params section, you'll establish the Key / Value pairs that will be passed into the next page. In this example, we are making the keys 'team' and 'status' while its value will be the dynamic variables {{record.team}} and {{record.status}} respectively.

Remember, what we want to retain is the 'team' value of the record as well as the 'status' one that was clicked by your user, so it can be pulled for the next page. This setup will send the user to a page called 'Projects' and store the record's 'team' and status' value into its URL parameter.


Page 2 (Project)

Now, when the user arrives on your Projects page, the URL will be something like this:
โ€‹

Now, you are free to use the URL Parameters in any text field to use the custom value by referencing its key in the {{params.CustomKey}} variable.

In the above case, you would use the {{params.team}} variable to render the 'sales' value and using the {{params.status}} variable to render the 'pending' value. These values can be applied to a hidden filter for a more segmented view of your data set!


Result

Did this answer your question?