Welcome, Guest Login

Support Center

Create Adaptive UI

Last Updated: May 19, 2017 05:14PM EDT
Create Adaptive UI


Introduction

System values gives access to device level information like screen size, Network Status, OS version etc.
In this article we review how to use System value for Size & Position for Canvas Layout.

We also review how to use Formatters to Add, Subtract, Multiply or Divide.


Device Screen information
‚Äč The following System Values allow you to use layout in wide variety of devices:
- Device Available View Height
- Device Available View Width


Older system values remains available for compatibility purpose.
- Device Landscape Height
- Device Landscape Width
- Device Portrait Height
- Device Portrait Width

You access System Value in the Value Editor
accessible anywhere you see the pencil  icon

That means it's accessible under the Specific or General Tab of the Block Editor or in, our case, in Size & Position:


In Size & Position, Select Pencil Icon



Pencil brings the Value Editor


The values look like this:
[[sys:deviceAvailableViewHeight]]
[[sys:deviceAvailableViewWidth]]
 
Example, For an image to stretch out the full width of the view:
use [[sys:deviceAvailableViewWidth]] to define the Width.

 
You can also use formatters on System Values. 
Add, Divide, Multiply, Subtract.

Formatters
‚ÄčLine up your mouse before the end brackets "]]" to add your formatter.

So now you can add your formatter and it will look like this:


In this example we want a block to always align a constant value from the bottom we would use a formatter like this:

[[sys:deviceAvailableViewHeight:sub 60]]

This would layout the value 60 pixels no matter what the height of the device.

In the RESTAURANT Tutorial app (Available for download in Dashboard) we have buttons that layout relative to the left edge constraint. We use 2 formatters, Subtract and Divide.

We use the pipe symbol to separate the additional formatters "|". 
The calculation looks like this:
[[sys:deviceAvailableWidth:div 2|add 13]]
 
This lays out the button always relative to the device width.


Learn More
- System Values
- Creating Variable



 

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets1.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete