Set Variable
Last updated
Last updated
Think of variables as labeled boxes where you can store different types of information, like text, numbers, user inputs or data from actions. These boxes help you manage dynamic content and maintain state across different parts of your app. In Bravo, variables are defined with the following notation: ${VariableName}. Learn more here.
The "set variable" tag is a mechanism to store a value from a user input or action into a variable, which can then be utilised in subsequent interactions or calls across different pages or components within your application.
This feature helps in maintaining state, passing data between components, and managing dynamic content based on user interactions.
These tags must be appended to any input component like[component:input-text] or [component:input-select].
The set variable tag captures the value of an input and save it into a named variable.
For example:
In this example, a dropdown menu, which is an input-select component is created with sports options. When a user selects an option, the value (e.g., "Basketball") is stored in a variable named sportId.
Once a variable is set, its value can be accessed and used in any subsequent interactions, calls on the next page or component of you application.
The Action Set Variable tag sets a variable and triggers an additional action such as go to page, close and refresh.
For example:
In this case, the value selected in the input-select component will trigger the action to set the variable and allows you to set the variable value and on success action such as go to page, refresh and close.
You can assign a name and value to a variable using static or dynamic data.
In this Figma file, we have:
A main screen with a container designed for a list of all homes.
A modal with a dropdown with options which will be connected to a POST request.
Another screen with a list of homes filtered.
The Modal designed for the filter contains the tags:
The backend used in this example is Xano. Here's the database:
A POST request that filters the list of homes by city.
The endpoint should be a POST request that returns a list as response as we need to bind an input variable to the dropdown and then bind a list to the next screen to show the results.
Add the POST endpoint to Bravo and replace the parameter and make it dynamic with a variable. In this example, we're using ${home_city}
Add the JSON Body coming from Xano's Run & Debug Section and replace the value for a variable ${home_city} This is the input that its going to be binded to the dropdown filter form data.
Add test values
And click send to receive the data.
Finally, rename the output variables and match them with variables from other requests.
Once having that, let's bind the screens. Bind the dropdown input to the POST request, specifically to the variable home_city.
Select the element which contains the [action:submit] tag, it normally has the lightning icon and set up the response action. In this example, we're setting Go to page "Homes by City" which is the next screen we're we want to retrieve the results.
Now, select the next screen "Homes by City" and bind container to the POST request created to filter homes by city.
That's it! Test and preview with Bravo Vision.
