This lesson will cover the following topics:

02 | Overview
05 | Custom JS

01 Getting Started

This tutorial covers formula variables, including:
  • Formula variables overview.
  • Numeric variables.
  • String variables.
  • Custom JavaScript variables.
  • Usage examples.
Note: when working with variables, ensure you have debug mode enabled so you can review how the variables are being passed.

02 Overview

These variables can often be referred to as power variables and can be inserted on a page or global level. Most of the time, you will set a formula field on a page level, as these formulas are used to affect elements on a page.

03 Numeric Variables

Numeric variables allow you to create dynamic calculations.
1. Navigate to the Custom Variables window and click the Numeric tab.
2. Click the Add a Numeric Variable (+) icon. The variable field will be added. You can give your variable a unique name.
3. Click the Configure button. The Configure Numeric Variable screen opens.
configure actions > numeric formula fields

4. Select the value fields from the drop-down list, you can choose to map the result of the formula to one of your elements in the project.
configure numeric value window

The debug mode window will provide a detailed breakdown of how the numeric fields followed the calculations you configured.
debug project window

04 String Variable

You can create text variables that allow you to perform dynamic manipulations using text inputs and fields.
1. Navigate to the Custom Variables window and click the String tab.
2. Click the Add a String Variable (+) icon. The variable field will be added. You can give your variable a unique name.
3. Click the Configure button. The Configure Numeric Variable screen opens.
configure actions > string tab
4. Select the value fields from the drop-down list, you can choose to map the result of the formula to one of your elements in the project. In general, a space will be added to the text fields so ensure you don’t insert any spacing unless you need it.
configure string variables
The debug mode window will provide a detailed breakdown of how the text fields followed the calculations you configured.
debug project view

05 Custom JS

You can create fully customized variables that hold JS code.
1. Navigate to the Custom Variables window and click the Custom JS tab.
2. Click the Add a Custom JS Variable (+) icon. The variable field will be added. You can give your variable a unique name.
3. Click the Configure button. The Configure Custom JS Variable screen opens.
configure actions > custom JS window
4. Enter your JavaScrip, using the dropdown you can enter values from your project. For our example, we have two fields in the project, a numeric and a text field. When a number is entered into the numeric field, the text field will reflect whether this is a Fibonacci number or not.
configure custom js variable
When previewing the project, you can enter numbers into the numeric field and the text field will indicate whether this is a Fibonacci number.
example of how the custom js works

06 Strip Variables

Strip variables can be used when you have inserted a repeat strip or column. These variables can be used to store values for individual records stored within their repeat type.

The variables created will pull through to the repeated strips.
configure string variable for repeat strip

Your debug mode will provide a breakdown of how the repeat strip fields are concatenated.
debug project showing how the variables work when using a repeat strip

07 Got Feedback?

Additional Resources