Responsive Forms

It is possible to make the Forms configuration Components responsive. This means that the configuration can vary depending on the size of the display area. This is possible, for example, when using different devices such as desktops, tablets, and smartphones.

The configuration reacts dynamically to changes in the viewport. For example, the configuration may change when the browser window is maximized. A slightly more complex example of something that reacts dynamically to the viewport can be found here.

While it is possible to influence almost all configurations this way, it makes sense to apply this only to configurations that determine the layout. These include, for example, layout, minWidth, minHeight, width, height, maxWidth, maxHeight, flex, and labelAlign.

Syntax

To make the configuration of individual parameters responsive, the attribute responsiveConfiguration must be added to the component. The value is an object that, in turn, contains individual conditions and, accordingly, further component configurations.

A condition consists of a valid JavaScript expression. The following variables can be accessed:

landscape: True if the device is in landscape orientation (always true on desktop devices).
portrait: True if the device is in portrait orientation (always false on desktop devices).
tall: True if width < height, regardless of device type.
wide: True if width > height, regardless of device type.
width: The width of the viewport in pixels.
height: The height of the viewport in pixels.
phone: True for smartphones.
tablet: True for tablets.
desktop: True for desktop devices.
touch: True for devices with touch support.
safari: True for the Safari browser.
chrome: True for the Chrome browser.
firefox: True for the Firefox browser.
ios: True for iPad, iPhone, and iPod.
android: True for the Android operating system.
windows: Applies to the Windows operating system.
blackberry: Applies to the BlackBerry operating system.
tizen: Applies to the Tizen operating system.

Example of complex conditions

 "responsiveConfiguration": {
     "desktop || width > 800": {
         "width": 400
     },

     "!(desktop || width > 800)": {
         "width": 300
     }
 }

In the following example, the container’s layout switches between horizontal and vertical depending on the available width.

Example

{
    "layout": "horizontal",
    "responsiveConfiguration": {
        "width >= 500": {
            "layout": "horizontal"
        },
        "width < 500": {
            "layout": "vertical"
        }
    },
    "components": [
        {
            "flex": 2,
            "id": "street",
            "label": {
                "de": "Straße",
                "en": "Street"
            },
            "type": "textfield",
            "value": "/data/street"
        },
        {
            "flex": 1,
            "id": "streetNumber",
            "label": {
                "de": "Nr.",
                "en": "No."
            },
            "type": "textfield",
            "value": "/data/streetNumber"
        }
    ],
    "type": "container",
    "maxWidth": 500
}

Further Information

Further details can be found in the documentation for the framework being used.

The configuration specified in the documentation at responsiveConfig must, as indicated above, be specified at responsiveConfiguration.

Keywords: