Variables
Last updated
Last updated
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 ->]
________________________
Variables are set as integer or string value to Button/Link/Image/Text elements and to Screen. This is done in properties in Constructor:
Add Button, Link, Image elemet to screen or select any Screen you have in the bottom of Constructor
Click Actions in Properties panel
Select Set Variable from the dropdown
Assign one or several Name and Value pairs
Click Save.
_____________________
Variables can be called in any part of the platform by using Hashtags.
___________________________________________
______________________________________
We have Weather check app where a user gets current temperature information on entering a city. The temperature information is recieved from apixu.com service via API operation.
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.
How it was set up:
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.
2. 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 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:
Hashtags
Set Visibility conditions: #Variable:selected*size*# = 1. The button is visible when selected.
