> For the complete documentation index, see [llms.txt](https://mobsted-2.gitbook.io/knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mobsted-2.gitbook.io/knowledge-base/references/intro-placeholder/variables.md).
# Variables
Variables store temporary data which can be used in any part of Mobsted platform. Variables can be used to:
* Hide/show screen elements depending on user actions \[Step by step example ->]
* Make math calculations based on user input \[Step by step example ->]
* Display API operations results depending on user input \[Step by step example ->]
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
#### SETTING UP VARIABLE
Variables are set as integer or string value to[ Button](/knowledge-base/references/intro-placeholder/constructor_elements.md#button)/[Link](/knowledge-base/references/intro-placeholder/constructor_elements.md#link)/[Image](/knowledge-base/references/intro-placeholder/constructor_elements.md#image)/[Text](/knowledge-base/references/intro-placeholder/constructor_elements.md#text) elements and to [Screen](https://mobsted-2.gitbook.io/knowledge-base/screens). This is done in properties in **Constructor:**
1. Add **Button**, **Link**, **Image** elemet to screen or select any **Screen** you have in the bottom of Constructor
2. Click **Actions** in **Properties** panel
3. Select **Set Variable** from the dropdown
4. Assign one or several **Name** and **Value** pairs
5. Click **Save.**
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
#### CALLING VARIABLE
Variables can be called in any part of the platform by using Hashtags.
.gif?alt=media\&token=740d8243-eeec-4fd4-9fe5-9de1143e0323)
####
#### \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
#### **USE VARIABLES TO HIDE/SHOW SCREEN ELEMENTS**
**\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_**
#### **USE VARIABLES IN MATH CALCULATIONS**
**\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_**
#### **USE VARIBALES IN API OPERATIONS**
We have Weather check app where a user gets current temperature information on entering a city. The temperature information is recieved from [apixu.com](https://kb.mobsted.com/article/apixu.com) service via [API operation](/knowledge-base/basics/introduction/use_any_internal_and_external_api.md).
####
We have Water delivery app where you can select bottle size and quantity. You can also see the summary of your order upon order confirmation. We use variables to hide/show elements and for calculations.
App basic logic:
* When a size button is clicked, it is replaced with white to indicate selection
* If the size button is clicked again, it is replaced with blue to indicate deselection
* When one size is already selected and another size button is clicked, the the first button is deselected automatically
* When the order is confirmed, order information appears on the screen.
.gif?alt=media\&token=0c3c16d8-a238-42c7-a31a-e7afb48fa178)
**How it was set up:**
1. We created pairs of buttons for each size: blue and white.
**For blue buttons:**
* Set **Variable** with **Name/Value** pairs:
* Selected\*size\* = 1. The variable is set to 1 on button click.
* Selected \*other size\* = 0. When one button is selected all other buttons are deselected.
* size = bottle size
* price = amount
Example: set up for blue buton 12 OZ.
* Set **Visibility** conditions: #Variable:selected\*size\* = 0. The button is visible when not selected.
**For white buttons:**
* Set **Variable** with **Name/Value** pairs:
* Selected\*size\* = 0. The variable is set to 0 on button click.
* Set **Visibility** conditions: #Variable:selected\*size\*# = 1. The button is visible when selected. \
2\. [Select](/knowledge-base/references/intro-placeholder/constructor_elements.md#select) element contains drop down with quantity. It's Backendname is set as **amount** which is used for calculation the amount to be paid.
3**. Confirm** button **Variable** set with **Name/Value** pair:
* **total** = =(#Variable:price# \* #Backendname:amount#)=.
[Math formula](/knowledge-base/basics/introduction/use_math_formulas.md) in **Value** field calls out #Variable:price# set for the selected button.
4\. **Text** element calls out **Variables:**
* \#Variable:size# from the selected size button
* \#Variable:total# result of calculation from **Confirm** button.
App user view:
#### MENTIONED ARTICLES
* [Constructor elements](/knowledge-base/references/intro-placeholder/constructor_elements.md)
* [Hashtags](broken://pages/-Lng8YhcijvNwU_6pHum)
* [Use MathJS formulas](/knowledge-base/basics/introduction/use_math_formulas.md)
.gif?alt=media&token=bfe0c1e2-dd42-4a11-98ea-b0cc01d01a32)
