Skip to main content
All CollectionsAdvanced
Custom Variables

Custom Variables

Justin Yan avatar
Written by Justin Yan
Updated over a week ago

Custom Variables are an advanced level set-up in Frontly that will enable you to to pull values from your data sources in ways that any standard dynamic variable would not be able to, since the system's search parameters will be entirely define by you!

Use custom variables to confirm record values, to display values that meet your specific conditions and to configure even more dynamic rules for your hidden filters, permissions and display/run conditions!


Here are some powerful use cases of the custom variable that references the examples shown above:

  1. On a product listing page, pairing buttons and the 'Navigate to Page' action that can give users access to the product ID before or after it.
    ​

  2. As a security measure before executing a webhook POST request to another SaaS tool, there is a run condition in place that checks to see if the logged in user's details exists in the Users Table first.
    ​

  3. Being able to reference the record ID of the most recent order logged into an 'Orders' data source.
    ​

  4. On the same 'Orders' data source, being able to reference the last record ID sorted in the 'Price' column. In a descending list of values, the last sorted record would be the highest one.
    ​


Creating and Accessing Custom Variables

To find your custom variables, you will have to go into your app settings to the 'Custom Variables' tab (visualized above). To create a new variable, click + Add Variable. Clicking into it will show a modal with a number of settings to configure.

In your app editor, once you've created a custom variable, they will show in the injector modal and can be inserted into a field like any other dynamic variable.

πŸ’‘ Did You Know?

A great way to test to see if your custom variable is pulling the value you've conditioned is by entering them into a text block and seeing what value surfaces after you preview it!


Overview of Fields and Settings

Below are the available Variable Types, type of fields that will populate based on your selection and a detailed description for each field.


Variable Type:

Get value from record

Fetch a value or a set of values from an entire row based on how you've configured the rest of your fields.

Record exists (true/false)

Determine if the set of conditions you've configured for this variable type are met to produce a value that is TRUE or FALSE.


Record Priority

Determine how you want to prioritize your records when there is more than one record that meets your conditions. Pick between the first record or last record in your data source.


Sorting Column

If the 'Get value from record' variable type is selected, use this setting to pick a column to be sorted and to enable even more precision for the value(s) to be fetched.


Variable Key

This is the key that will be referenced by the variable under the syntax {{custom.your_key}}


Data Source

The data source you'll be getting the value of the variable from.


Conditions

Identical to the conditional settings of a hidden filter, create a condition or set of conditions to select the data source field you'll be extracting or checking the value from and match it against the dynamic or static value you entered into the 'Value' field.


Record Field (optional)

If the 'Get value from record' variable type is selected, this field will narrow down your fetched values down to the exact field.

Important Note πŸ’‘:
​
To explain this setting and function greater in-depth, setting this to 'None' will make the custom variable fetch the entire row of data that meets all of your conditions instead of the single field value.

Therefore, to access a value from a custom variable configured this way, you will need to add an additional suffix to the variable that is the value's designated field. The updated syntax of these custom variables appears as followed:
​
​​{{custom.your_key.Custom Field}}
​
For instance, in the highest_price variable example referenced earlier, in order to display the product name linked to the record with the highest price where 'Product' is the field the names are displayed in, the custom variable you would enter would be the following:
​
​{{custom.highest_price.Product}}


Seems overly complex? Why?


The set-up for custom variables is advanced for its flexibility of functions and its range of configurations. Some users may use a custom variable just to reference a single value, and others may want to use it to reference several values of the same row ID. At Frontly, we want to enable this feature to cater to both use cases, which is why we've enable both methods!


Custom Variable Examples

For your reference, here's how each of the variables were configured for the examples mentioned at the start of the article.


Custom Variables Action

The 'Custom Variables' action is a powerful feature that enhances the dynamic capabilities of your Frontly app. While custom variables are typically processed when a page first loads, this action allows you to update and retrieve their values in real-time during user interactions.
​

Here's how it works:

  1. Add the 'Custom Variable' action to your sequence.

  2. Select the specific variables you want to update dynamically.

  3. As users interact with your app, the selected variables will update without requiring a page refresh.

This action is particularly useful when you need to:

  • Reflect changes in data immediately after user interactions.

  • Ensure your app always has access to the most up-to-date variable values.

  • Update dynamic content in real-time: Use the 'Custom Variable' action with a 'Refresh Block' action to instantly update text displays or other UI elements based on user interactions. For example, you can dynamically change a featured product section without reloading the entire page, creating a more responsive and interactive user experience.

By leveraging this action, you can create more sophisticated and fluid applications that respond instantly to user input, improving overall user experience and functionality!

Did this answer your question?