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
iconThat means it's accessible under the Specific or General Tab of the Block Editor or in, our case, in Size & Position:
Pencil brings the Value Editor
The values look like this:
[[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.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:
Learn More