# Set Variable {% hint style="success" %} #### What Are Variables? 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](/connect-api/request-url-variables.md). {% endhint %} 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. ## :label: The Tags {% hint style="info" %} These tags must be appended to any [input component](/bravo-tags/form-and-input-fields.md) like`[component:input-text]` or `[component:input-select]`. {% endhint %} ### **Set variable** The set variable tag captures the value of an input and save it into a named variable. ``` [set-variable:variableName] ``` For example: ``` [component:input-select:basketball=Basketball, football=Football, tennis=Tennis][set-variable:sportId] ``` 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. ### **Action Set Variable** The Action Set Variable tag sets a variable and triggers an additional action such as **go to page**, **close** and **refresh**. ``` [component:input-select][action:set-variable] ``` For example: ``` [component:input-select:basketball=Basketball, football=Football, tennis=Tennis][action:set-variable] ``` 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.

## Practical Example: ### Filter functionality with Set Variables #### Figma file {% embed url="" %} 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: ``` [component:input-select:Barcelona=Barcelona,Paris=Paris,Milan=Milan][set-variable:home_city] ```

#### Backend The backend used in this example is Xano. Here's the database:

A [POST request](/connect-api/set-up-api-requests/creating-an-api-collection/xano/data-library-connect-to-any-api-post-request-xano.md) 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. 1. 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}` 2. 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.

3. Add test values

3. And click send to receive the data.

4. Finally, rename the output variables and match them with variables from other requests. 5. Once having that, let's bind the screens. Bind the dropdown input to the POST request, specifically to the variable `home_city`.

6. 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.

7. Now, select the next screen "Homes by City" and bind container to the POST request created to filter homes by city.

8. That's it! Test and preview with Bravo Vision. :tada:\ \

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.bravostudio.app/connect-api/request-url-variables/set-variable.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.