Guides & tutorials

Variables: Referencing data in fields and actions

No items found.
Import this tutorial scenario in your workspace
Table of contents

In Arengu, variables are a basic element to configure forms and flows in any use case: to send form input data to a CRM, generate an OTP and send it by email or SMS, or to configure conditional logic. Learn everything you need to know about them.

What are variables?

In programming, a variable is a value that can change.

For forms and flows, it can be the data input by the user in the form (the user email, name, phone number), meta data obtained from an URL, or output data generated from an action in a flow (a temporary code, a token, etc.).

Depending on the origin of the data, the variables present different syntaxes, but they are all always identified by a unique ID.

Arengu automatically generates the ID for each field and action, but you can make them easier to identify by editing them. You can use the alphanumeric system you prefer, but they cannot contain spaces between characters.

Variables syntax

Thanks to the autocomplete menu, it is unlikely that you will have to write variables by hand. However, here you can check their syntax and some examples of common uses.

Form variables

To reference form data, we use both the syntax {{fields.field_Id}} and {{input.body.field_Id}}, although we recommend that you use the first option.

For example, you can use form variables to send the input data to your CRM, by referencing it in a CRM action, as you can see in the picture above. To learn more about this, you can check here how to send form input data to Airtable.

Another common use of form variables is to set the email or phone number input by the user in a sending action, to send a temporary code. For example, you can learn here how to send OTPs by email.

Flow variables

You can also reference output data from the actions of a flow, for example, to configure other actions that come next in the flow.

For example, a common use of flow variables is to send OTPs. The 'Generate one-time password' action will generate an output variable with the code to send to the user.

Flow variables are formed by the ID of the action and the data structure that must be followed to get the value. This means that if the ID of an action is ‘generateOTP’, all the output variables will start with that ID, as you can see below.

Flow variables are automatically generated after an execution of the flow and you will only need to select them from the autocomplete menu.

Note that for any output variable to be available, you will need to run the flow once. To do this, go to the form preview and input data to test it, to generate the output variables.

State variables

To build advanced use cases, Arengu allows you to reference flow variables in the form. For example, to pre-fill or autocomplete fields with data that is already stored in your CRM or from any other services with an API.

To use this type of variable you just have to include a 'Store state variable' action in the flow, list the output variables you want to store and set an ID for each one. 

The state variable will be automatically generated with the ID set on the left column, with the syntax {{state.variable_Id}}. To prefill a form field with it, you will only need to reference the corresponding state variable as the ‘Default value’ of the field in its settings.

To build this type of use cases, you can learn here how to autocomplete form fields with Airtable, Clearbit, or using the HubSpot API.

The variables autocomplete menu

Save time on checking variables syntax with the variables autocomplete menu. This menu displays all the available variables so you will only need to select one, instead of typing it.

To open this menu, just click on the plus button of the settings fields. You will find it in all the fields where variables can be referenced.

You can use the search bar to locate the variable by its ID or navigate the menu. 

To navigate the menu, first indicate where the variable came from: Forms or Executions. This last option shows the variables generated by the actions in the flows.

Once the source is selected, the menu will display all the available variables. In the ‘Executions' section, you can check that they are grouped by actions. Just click on an action to see them.

In the 'State' tab you will find the state variables. Remember that to use them in the form and other flows, you must add a 'Store state variable action' to store them.

Missing variables

If you can't find a variable, it's possible that it hasn't been generated yet. Just go back to the form preview and run it once by inputting data. The new variables will be available in the autocomplete menu after this execution.

You can also retrieve variables from previous executions of the flow, using the selector at the top of the menu. You refresh this data by clicking the button next to the selector.

Note also that if you have edited the ID of a field or action in a form that is already configured, after saving the changes, you must run it again for the syntax to be updated.

Stuck on configuring a flow? Contact us so that we can help you with the configuration of your use case or book a demo with one of our experts.

You might like to read

See more tutorials

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.