Skip to content

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:

PropertyDescription
agentThe current device agent
desktoptrue if the current device is a desktop device
heightThe height of the current device
languageThe current device language
mobiletrue if the current device is a mobile device
timezoneThe current device timezone
widthThe width of the current device

Here are some examples of expressions:

js
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.