Using Session Variables in Frontly
Session variables are a powerful tool in Frontly, designed to store key/value pairs temporarily during a user's active session. These values are retained until the user refreshes the page or logs out, making them perfect for managing dynamic behavior without writing any code.
Session variables are generally useful for:
Dynamically updating labels or text.
Setting up conditional visibility or filtering blocks.
Passing information from one page to another within an app.
Note: Session variables, like all Frontly variables, are case-sensitive and must be referenced exactly as they've been set.
How to Set Session Variables
Session variables are updated or cleared using the Set Session State action. When setting a session variable through this action, you'll configure a few simple parameters:
Custom Key Labels and Values:
In the setup grid, define the "Custom Key Label" and the corresponding "Value" you want to store.
Both the Custom Key Label and the Value can accept static inputs or dynamic variables using Frontly's
{{}}syntax or through the variable injector if listed.Once set, session variables can be referenced anywhere in your app using
{{ session.customKeyLabel }}, wherecustomKeyLabelmatches exactly what you assigned.
Clear Session Toggle:
A separate toggle within the Set Session State action modal allows you to clear all session variables if needed. This is helpful if you want to create a function that resets the app’s session values for the user.
Example: Basic Label Update
Scenario: When a user clicks a button, update a label on the page to greet them.
Use the Set Session State action to set a session variable, for example:
greetingMessagewith a value likeHello, {{ user.firstName }}!.Then, bind the label text to
{{ session.greetingMessage }}.Result: When the user clicks the button, the label instantly updates to show their personalized greeting.
Example: Advanced Filtering with Session Variables
Scenario: Create a page where users can click a category button and dynamically filter a list block based on their selection.
When a category button is clicked, use the Set Session State action to set a session variable like
selectedCategorywith the value of the clicked category (e.g.,{{ record.categoryName }}if pulling dynamically).Apply a Hidden Filter on the list block using the condition: "Category equals
{{ session.selectedCategory }}".Result: Only the records matching the selected category will display in the list.
By mastering session variables and the Set Session State action, you can build flexible, personalized, and highly dynamic apps in Frontly without needing any custom code.