How to reference forms and flows variables in Arengu

Introduction
How to reference forms and flows variables in Arengu

References and IDs are a crucial element of Arengu. With Arengu, you can create complex server-side logic for your forms, which means you will need to connect several pieces of your form, like your users' data on the form with the correspondent actions.

In order for your smart form to work properly, you need to make references in a correct way. This is how to reference values in Arengu, so you can connect all the data contained in the forms and in the flows.

Autocomplete variables: Quickly select what data you want to use

Arengu's templates are the easiest and fastest way to create forms and flows. If you use one of Arengu's templates, the references will be automatically completed, you will only have to edit the forms and flows to your tastes.

Still, Arengu is a powerful tool to build complex logic behind any type of form. That's why you can use it to build any use case you can imagine, adding as many flows as your business needs. To do so, you can start a form from scratch and add the flows yourself. But, how can you reference variables when they're not set by default?

Just click on the '+' icon, on the right side of the input field. When you click it, you'll see a list with all the variables you can reference, organized in different sections, depending on where they come from. Click on 'Form' if your variable comes from what the user filled in, or on 'Flows', if your reference is on the server-side logic on your form.

Input variables: How to manually reference data coming from the form

Input variables may refer to many different concepts, depending on which context you use this term. In this case, input variables refer to IDs coming from the form fields. In other words, input variables are data that come from what the user wrote in the form's fields.

Each field of your form has a unique ID. When you click on any field of your form, a settings menu will open on the right side of your screen. Right after the field type, you will find the ID. IDs are mandatory — you can't delete them, but you can modify them if you want to.

To reference values that come from the form, you will have to follow this structure:
{{input.body.field_id}}

Let's see an example. This is a multi-step form. The first step contains a registration form, while the second step contains a field to enter a verification code. The server-side logic for this form includes several actions, like the generation of a one-time password, an email sending the OTP, and the OTP verification. For all these actions, you will need to reference fields or actions.

In this case, when you click on the email field, you can see the field ID is called 'email'. In the next steps, you will need this ID, since you will need to reference it correctly in the Flows section.

This is the first flow of our smart form, which includes actions like 'Generate one-time password', 'Send SendGrid email' and an 'If/then condition', to inform the user if there has been error.  The 'Send SendGrid email' action will send an email that contains a code to verify their identity.

In other words, the 'Send SendGrid email' action on the Flows editor will send the one-time password to the user. But, to which email address? To the email address that the user wrote on the 'email' field. That is, {{input.body.email}}

Keep in mind, if you'd like to change the field's ID, you'll have to remember to change it accordingly in your references. Let's say you want to change the email field ID to 'email02'. Then your reference should be {{input.body.email02}}

Output variables: How to manually reference precedent actions on flows

Output variables correspond to IDs coming from previous actions of a flow.

Each flow action has a unique ID. Click on any action of your flow, and a menu will open on the right side of your screen. The first field you'll see is the action's ID. Just like the field's ID, this is mandatory, although you can modify it if you want.

To reference values that come from a flow action, you will have to follow this structure:
{{action_id.output_variable}}

We'll see an example with the same use case: the registration form with a one-time password. In this flow, we added an action to display a message after the email is sent — an 'If/then condition' action, that displays an error or success message.

In order to work correctly, you need to set a condition in this action. In this case, this action has to scan if there is an error or not after the email is send. Therefore, you need to reference the previous action, that is the 'Send SendGrid email' action.

Find the output variables in the Executions tab

If you're not sure what the output variable should be, you could find it in the Executions tab. After your forms has been submitted and the flows have been executed, go to Executions and inspect one execution. Click on 'Output' to see the names of the outputs.

Use case example: How to generate and send an OTP via email

Referencing values is necessary to connect form's fields to flow actions, but you can also use them to display dynamic messages to your users.

In this use case, we are sending a one-time password to the user who provided the email address in the first form step. To do so, you need to include the one-time password code in the body of the email. As you can see in the screenshot below, the code is referenced with the output variable format: {{generateOtp.code}}. Here, 'generateOtp' is the action's ID, while 'code' is the output variable of the same action.

Good to know! 🤔💡

  • Remember that if you change a form field ID, you'll have to change it accordingly in your flow action references. In future releases, it will be possible to automatically change all references. For example, if you have a form field ID which is fullName and you want to rename it to name, you need to replace {{input.body.fullName}} with {{input.body.name}} in all the flow actions you are using it.
  • Same happens with flow action IDs, if you change one and you're using it in another flow action, remember to change the references. As an example, if you have a flow action ID with generateOtp and you rename it to generate_otp, you need to replace {{generateOtp.code}} by {{generate_otp.code}} in all flow actions you are using the output code.
  • Once you execute a flow, you will be able to use the autocomplete variable component clicking the + icon on the right side of an input field. You'll see a list with all the variables you can reference from your form and all previous flow actions outputs. In future releases, it will be possible to easily use variables without having to execute the flow for first time.
  • If you click in the Executions tab inside your flow editor, you will find a detailed debug mode with all input/output/errors of all your executed flow actions and you can easily identify variable references or errors.
  • Always use the same style to represent variables in Arengu. We love using 🐫 Camel case. This case style combines words without spaces, and capitalizes only the first letter of the words, except for the first word. For instance, if we want to name an action ID with generate OTP we use generateOtp.
View Comments
Next Post

How to easily add server-side logic to your forms

Previous Post

How to create automated form-based landing pages with Arengu