Die BPC Version 4.0 wird nicht mehr gewartet.

Sollten Sie diese BPC Version nutzen, empfehlen wir Ihnen eine Migration auf eine aktuelle Version. Die Dokumentation zur neusten BPC Version finden Sie hier. Sollten Sie Fragen haben, wenden Sie sich bitte an unseren Support.

Responsive Forms

Es ist möglich die Konfiguration der Forms Komponenten responsive zu gestalten. Dies bedeutet, dass die Konfiguration je nach Größe des Anzeigebereichs anders ausfallen kann. Dies ist z.B. bei Verwendung unterschiedlicher Geräte wie Desktop, Tablet und Smartphone möglich.

Die Konfiguration reagiert dynamisch auf Änderungen des Anzeigebereichs. So kann sich z.B. die Konfiguration beim Maximieren des Browserfensters ändern.

Es ist zwar so möglich auf fast alle Konfigurationen Einfluss zu nehmen, aber sinnvollerweise sollte dies nur auf Konfigurationen angewendet werden, die das Layout bestimmen. Diese sind z.B. layout, minWidth, minHeight, width, height, maxWidth, maxHeight, flex und labelAlign.

Syntax

Um die Konfiguration von einzelnen Parametern responsiv zu gestalten, ist in der Komponente das Attribut responsiveConfiguration einzufügen. Als Wert wird ein Objekt angelegt, dass wiederum einzelne Bedingungen enthält und passend dazu weitere Komponenten Konfigurationen enthält.

Eine Bedingung besteht aus einem gültigen JavaScript Ausdruck. Dabei kann auf folgende Variablen zugegriffen werden:

landscape

Wahr, wenn das Gerät im Querformat ausgerichtet ist (auf Desktop-Geräten immer wahr).

portrait

Wahr, wenn das Gerät im Hochformat ausgerichtet ist (auf Desktop-Geräten immer falsch).

tall

Wahr, wenn Breite < Höhe, unabhängig vom Gerätetyp.

wide

Wahr, wenn Breite > Höhe, unabhängig vom Gerätetyp.

width

Die Breite des Ansichtsfensters in Pixeln.

height

Die Höhe des Ansichtsfensters in Pixeln.

phone

Wahr bei Smartphones.

tablet

Wahr bei Tablets.

desktop

Wahr bei Desktopgeräten.

touch

Wahr bei Geräten mit Touch-Support.

safari

Wahr bei Safari Browser.

chrome

Wahr bei Chrome Browser.

firefox

Wahr bei Firefox Browser.

ios

Wahr bei iPad, iPhone and iPod.

android

Wahr bei Android Betriebssystem.

windows

Wahr bei Windows Betriebssystem.

blackberry

Wahr bei Blackberry Betriebssystem.

tizen

Wahr bei Tizen Betriebssystem.

Beispiel für komplexe Bedingungen
 "responsiveConfiguration": {
     "desktop || width > 800": {
         "width": 400
     },

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

In folgendem Beispiel wird das Layout des Containers abhängig von der verfügbaren Breite zwischen horizontal und vertical getauscht.

Beispiel
{
    "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
}

Weiterführende Informationen

Weitere Details können unter in der Dokumentation des eingesetzen Frameworks nachgeschlagen werden.

Die in der Dokumentation angegebene Konfiguration unter responsiveConfig muss, wie oben angegeben, unter responsiveConfiguration angegeben werden.

Keywords: