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

![](/files/-LoPExCldYrgwHGiRqha)

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### CALLING VARIABLE

Variables can be called in any part of the platform by using Hashtags.

![](/files/-LoyhY1DU4o0IKTKwoRz)

####

#### \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### **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). 

<div align="left"><img src="/files/-Lp8EJn0CYlPXxIc0EqP" alt=""></div>

####

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.&#x20;

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.&#x20;

![](/files/-LoyRjD5vsInJhDQdo5D)

**How it was set up:**

1. We created pairs of buttons for each size: blue and white.&#x20;

**For blue buttons:**&#x20;

* Set **Variable** with **Name/Value** pairs:&#x20;
  * Selected\*size\* = 1. The variable is set to 1 on button click.&#x20;
  * Selected \*other size\* = 0. When one button is selected all other buttons are deselected.&#x20;
  * size = bottle size
  * price = amount&#x20;

Example: set up for blue buton 12 OZ.&#x20;

<div align="left"><img src="/files/-LoyX-MoJ_CC1cbTx-oc" alt=""></div>

* Set **Visibility** conditions: #Variable:selected\*size\* = 0.  The button is visible when not selected.&#x20;

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/other/1567577559572/image.png)<br>

**For white buttons:**&#x20;

* Set **Variable** with **Name/Value** pairs:&#x20;
  * Selected\*size\* = 0. The variable is set to 0 on button click.&#x20;
* Set **Visibility** conditions: #Variable:selected\*size\*# = 1. The button is visible when selected. \
  ![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/other/1567577522185/image.png)

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.&#x20;

&#x33;**. 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.&#x20;

<div align="left"><img src="/files/-LoydvX4yZZx4EV1fbZP" alt=""></div>

4\. **Text** element calls out **Variables:**&#x20;

* \#Variable:size# from the selected size button
* \#Variable:total# result of calculation from **Confirm** button.

<div align="left"><img src="/files/-LoybCuGR2-Iku7QE5KM" alt=""></div>

App user view:&#x20;

<div align="left"><img src="/files/-Loylo1k0lxxaGSDNbfz" alt=""></div>

#### 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)