Create Adaptive UI


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:



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.


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