All Collections
Advanced
Local State Variables
Local State Variables

Learn how to use Frontly's local state feature to create dynamic updates in your page.

Patrick avatar
Written by Patrick
Updated over a week ago

For more advanced conditional logic scenarios, you can use Frontly's Local State feature to create and maintain key / value pairs of data, stored in the user's session.

These local state variables can be used in dynamic string fields across the app, for purposes like displaying values, fetching dynamic data, and used for conditional rendering.


Understanding Local State Variables

Local state variables in Frontly serve as containers, storing values that execute specific functions across your app. Each local state represents a unique container with headers signifying the key or field and contents representing the stored value.

There are three crucial points to remember about Local States:

  1. Each Local State Variable can only hold one value at a time. While values persist until a page refresh or logout, they won't impact workflows until explicitly referenced.

  2. Local State values will persist in a user's session indefinitely until they log out, quit or refresh their page. Therefore, their values will persist across pages!

  3. Local States keys and their values, like dynamic variables are case-sensitive! Be sure you're inputting them correctly when you're referencing them.


Scenario

The setup for this scenario is relatively simple. The goal for this one is to have a Text block that will display one of two dynamic messages which depends on who the user is and what button they've clicked.

Below are the some screenshots with captions to describe this set-up:

First, we will create some buttons and a Text block to a page.

The basic page setup with 2 Button blocks and a Text block:


The Text Block Setup:


The Button Click Action 'Update Local State' setup:

For the "Change to Name" Button

For the "Change to Email" Button


Result

Clicking on the 'Change To Email' button immediately updates the text:


Clicking on the 'Change To Name' button updates the Local State and the text:

That's it! Now you can trigger updates to your local state, create custom variables of any name, and access them using the {{ localState.yourCustomName }} syntax.

Did this answer your question?