Displays
The App designer supports creating multiple displays for various device types such as mobile, tablet and desktop. You can create a single responsive display that will adapt to each display type and resolution or you can create additional displays for specific device types.
Each display definition contains a matching expression that is evaluated to determine if the display should be used on the current device.
Creating Displays
When creating a new display, you provide a display name
and visible app title
to use when the display is active.
The display is given an initial set of pages based on the selected Page Set
: as either minimal
or standard
. The page list can be modified later using the page designer to add or remove pages.
The minimal
page set includes a login page, a reset password page and a user registration page. The standard
page set includes the minimal set and pages for selecting devices, displaying device data, dashboards, alerts and account settings.
For the users with the owner role, the app designer and associated pages will always be visible.
Display Expressions
The Expression Type
selection defines an JavaScript expression to select the desired device type. The Mobile
, Tablet
, or Desktop
options will pre-fill this expression for you. You can also select Responsive
to use the same display for all devices. The Custom
option allows you to enter a custom JavaScript (like) expression that is evaluated at runtime to determine if the display definition should be used. The expression is evaluated in the context of the current device and can access the following properties:
Property | Description |
---|---|
agent | The current device agent |
desktop | true if the current device is a desktop device |
height | The height of the current device |
language | The current device language |
mobile | true if the current device is a mobile device |
timezone | The current device timezone |
width | The width of the current device |
Here are some examples of expressions:
expression: 'width < 640'
expression: 'width >= 640 && width <= 1024'
expression: 'width > 1024 && language == /en/'
The query language supports the following operators:
- / ( ) ^ ! % == != < <= > >= ^= ^!= $= $!= << >> && || <> ><
These extension operators have the following meaning:
a ^= b means a starts with the string b a ^!= b means a does not start with the string b a $= b means a ends with the string b a $!= b means a does not end with the string b a >< b means a contains the string b a <> b means a does not contain the string b
Sub-expressions can be grouped with parenthesis and the boolean operators && and || can group conditional operands.
Regular expressions (delimited by slashes) may be used with the "==" and "!=" operators. The regular expression can be on either side of the operator.
The language understands the types: Numbers, Boolean, String literals, Regular Expressions and null.
The expression engine is run-time limited to evaluate up to 100 terms. This is to protect your cloud against denial of service attacks.
See Display properties for a full list of display properties.