URL Parameters

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

Patrick avatar
Written by Patrick
Updated this week

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 'team' with the value of 'marketing'.

Consider the next example URL:

There are now multiple parameters in the same URL, where 'team' has the value 'marketing' and 'company' 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

Picture a Table block with a list of different project. 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 'Project' 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 key 'id' while its value will be the dynamic variable {{record.frontly_id}}.

Remember, what we want to retain is the 'frontly_id' of the record 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 'Project' and store the record's frontly_id value into its URL parameter.

Page 2 (Project)

Now, when the user arrives on your Project 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.id}} to render the value '45'.

Therefore, in order to use whatever value matches the one in your URL, you simply need to follow this syntax. If for instance your URL parameter had the following "?team=marketing", your variable would be {{params.team}} in order to retrieve the 'marketing' value.

Did this answer your question?