To show data from your tables on a page, a function runs when the page loads, its result fills a page variable, and your components display that variable.
1
A query reads the data
A SELECT custom query over your table.
2
A function runs the query
An Execute Query node connected to an Output node.
3
A page event runs the function
An event with Trigger Type On Page Load.
4
A page variable holds the result
The function's output is written into a variable.
5
Components show the variable
Text, a table, or a repeated custom component.
Test the function on its Test tab before you connect it to the page, and check that the query's security lets your visitors run it.
1
Open the page builder
Go to Pages and open the page's Content.
2
Open Page Configuration
Choose Page Variables and click Add Variable.
3
Describe the variable
Fill in Variable Name, Variable type (String, Number, Boolean, Array or Object) and Variable Source.
4
Set a default
Give it a Default value. For a list, use type Array with the default [].
With Variable Source set to From URL, the value is read from the address, using the URL Parameter Name you enter.
1
Add a page event
In Page Configuration, choose Page Events and click Add Page Event.
2
Set when it runs
Give it a Label / ID, set Trigger Type to On Page Load and Action type to invokeFunction.
3
Choose the function
Pick it in Select Function.
4
Map the result
Click Edit Function Inputs & Outputs. Under Output targets, send each output to a page variable of the same type.
5
Save the page
Click Update Page.
Give the output the same name as the variable it fills, such as products. The mapping is then easy to read.
In a title, text, button, badge and many other components, type the variable's name between double curly braces. Use a dot to reach a field of an object variable. No spaces inside the braces.
product.name
The name field of an object variable called product.
user.firstName
A built-in variable: the signed-in user's first name, empty for visitors.
configuration.language
A built-in variable: the visitor's current language.
While the event is loading, a grey placeholder is shown. If the variable does not exist or is empty, visitors see the braces as typed, so give every variable a sensible default.
Add a table component and pick an array variable in Data Source (Page Variable). Columns are created from the fields of the first row. Custom Table Buttons add actions to each row.
Build one card as a custom component in Components, using the fields of a single item as placeholders. Place it on the page and choose the array variable in Inject Page Variable. The card repeats once per item, and you choose how many sit side by side on each device and the space between them.
Inside each copy, item holds the whole entry and index its position, starting at 1.
Every component, column, row and section has Variable Visibility Conditions. They hide the element when any one of them is true.
Hide a product grid while the list is empty: condition Is empty on the products variable.
Show an empty-state message only when there are no products: hide it with Is not empty.
To check whether a value is missing, use Is empty and Is not empty rather than Variable exists.
