Use Page Variables and Parameters
Page variables and page parameters both have a declared name and type, but receive their values in different ways:
- A page variable stores state that can change while the page is running. The workflow is declare → set → read.
- A page parameter receives data when another page opens the target page. The workflow is declare on the target page → pass from the caller → read on the target page.
For scope and selection guidance, see Variables and Parameters.
Use page variables
A page variable belongs to the page where it is declared and can be referenced and updated throughout that page instance.
Declare a page variable
Open the target page and add a page variable under Data → Variables.
| Setting | Description |
|---|---|
| Name | Name used to reference the variable on the page. |
| Type | Data type that the variable can receive and bind. |
| Initial value | Value assigned when the page variable is created; may be empty. |
Set a page variable
Add Set Variable to a component event, then:
- Set Scope to Page and components.
- Select the target page variable.
- Bind the value to write.
The value can come from a fixed value, component output, current list item, page parameter, or earlier action result. For an array variable, the action can also set, add, or remove values when the corresponding operation is available.
Reference a page variable
A page variable can be referenced in:
- Component data bindings.
- Data-source filters, sorting, or other parameters.
- Conditional data.
- Inputs to frontend actions.
- Component content, visibility, or styling.
A page variable belongs to the current page instance. Its current value expires when the page unmounts, and a new page instance starts with the initial value.
Example: Store a product search filter
Goal
Store a search keyword on the product list page and filter products by that keyword.
Key configuration
- Declare a Text page variable named
search_keywordon the product list page. - Add Set Variable to the search button’s On click event and write the input value to
search_keyword. - Reference
search_keywordin the product list’s data condition. - When the variable is empty, use conditional data to select the data source without a search filter.
Expected result
The product list updates when the search value changes. After the page instance unmounts, search_keyword returns to its initial value.
Use page parameters
A page parameter is an input declared by the target page. The caller supplies the value when it opens that page, and the target page references the value in data bindings or actions.
Declare a page parameter
Open the target page and add a path or query parameter under Data, then set its name and type.
| Type | Purpose |
|---|---|
| Path parameter | Forms part of the page path and commonly identifies the record displayed on a detail page. |
| Query parameter | Carries filters, pagination, source information, or other optional data. |
Pass a parameter from another page
Add Navigate to page on another page and select the target. The configuration panel then shows the parameters declared by that target page. Bind a parameter to a fixed value, component output, current list item, page variable, or other data in the caller’s context.
Path parameters require valid values. Query parameters may be omitted according to the target-page configuration. See Navigation Actions for supported types.
Reference a parameter on the target page
Page parameters can be referenced in:
- Page data-source filters, sorting, or other parameters.
- Component data bindings.
- Conditional data.
- On-load actions and inputs to other frontend actions.
Page parameters receive their values from navigation or the page URL. If the value must change and be reused after the page opens, copy it to a page variable.
Example: Open product details with a path parameter
Goal
Open the matching product details page when a user selects a product.
Key configuration
- Declare
product_idas a path parameter on the product details page, using the same type as the product table’sidfield. - In the product card’s Navigate to page action, pass the current product
idtoproduct_id. - On the details page, retrieve the product where
idequalsPath parameters → product_id.
Expected result
Selecting different products changes both the page URL and the displayed record. For example:
/products/1001Example: Pass a filter with a query parameter
Goal
Open the product list from a category entry and display products in that category.
Key configuration
- Declare
category_idas a query parameter on the product list page, using the same type as the category table’sidfield. - In the category entry’s Navigate to page action, pass the current category
idtocategory_id. - Reference
category_idin the product list’s data condition. When it is empty, use conditional data to show all products.
Expected result
When a category is passed, the page shows products in that category. Without a value, it shows all products. The URL resembles:
/products?category_id=20Troubleshoot the configuration
| Symptom | Check |
|---|---|
| The page variable does not update | Check the scope, target variable, and value binding in Set Variable. |
| Navigation reports a missing path parameter | Make sure every path parameter on the target page has a bound value. |
| The target page does not receive a parameter | Check that the caller selected the correct target page and parameter. |
| The data source returns no record | Check that the variable or parameter type matches the target field and that the data condition reads the correct value. |
| An empty query parameter returns no data | Check whether the data condition handles the empty case explicitly. |
| The variable returns to its initial value after reopening the page | Page variables do not persist; this is expected. |