Responsive Forms

It is possible to make the configuration of the forms Components responsive. This means that the configuration can be different depending on the size of the display area. This is possible, for example, when using different devices such as desktop, tablet and smartphone.

The configuration reacts dynamically to changes in the display area. For example, the configuration can change when the browser window is maximized. A somewhat more complex example that reacts dynamically to the display area is here

It is possible to influence almost all configurations in this way, but it only makes sense to apply this to configurations that determine the layout. These are, 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 inserted in the component. An object is created as the value, which in turn contains individual conditions and further component configurations to match.

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

landscape: True if the device is in landscape format (always true on desktop devices).
portrait: True if the device is in portrait format (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 Safari browser.
chrome: True for Chrome browser.
firefox: True for Firefox browser.
ios: True for iPad, iPhone and iPod.
android: True for Android operating system.
windows: True for Windows operating system.
blackberry: True for Blackberry operating system.
tizen: True for Tizen operating system.

Example for complex conditions

{
  "type": "textfield",
  "responsiveConfiguration": {
    "landscape && width > 800": { "label": "Bedingung ist wahr." },
    "!(landscape && width > 800)": { "label": "Bedingung ist falsch." }
  }
}

In the following example, the layout of the container is defined Layout of the container is swapped between horizontal and vertical depending on the available width.

Example

{
  "type": "container",
  "maxWidth": 500,
  "layout": "horizontal",
  "responsiveConfiguration": {
    "width >= 500": { "layout": "horizontal" },
    "width < 500": { "layout": "vertical" }
  },
  "components": [
    {
      "type": "textfield",
      "label": "Eins"
    },
    {
      "type": "textfield",
      "label": "Zwei"
    }
  ]
}

Further information

Further details can be found in the documentation of the framework used.

The configuration specified in the documentation under responsiveConfig must be specified under responsiveConfiguration as specified above.

Keywords: