Mehrsprachige Inhalte

Texte wie sie z.B. für die Label verwendet werden, können auch mehrsprachig verfasst werden. In diesem Fall wird der Text durch ein JSON-Objekt ersetzt. In diesem Objekt kann man für jede gewünschte Sprache einen Text hinterlegen. Dabei dient der ISO-639-1 Code des Landes als Schlüssel-Attribut und der Text als Wert.

Beispiel

  {
    "type": "textfield",
    "label": {
      "de": "deutsches label",
      "en": "englisch label"
    }
  }

Im state kann ebenfalls Mehrsprachigkeit verwendet werden. Dies wird beispielsweise für die Komponente Combobox verwendet. Hierbei werden, wie auch auf Komponenten Ebene, Labels übersetzt. Dies kann auch für andere Komponenten verwendet werden, indem Data-Binding auf Objekte angewendet wird, deren Pfad mit label endet. Alle Objekte mit label im Pfad werden versucht zu übersetzen. Objekte, die nicht label im Pfad haben, werden nicht übersetzt.

Die aktuelle Sprache selbst wird im state unter language vorgehalten und kann beispielsweise genutzt werden um Komponenten nur in der entsprechenden Sprache anzuzeigen.

Beispiel

multipleLanguages.json

{
  "$schema": "http://bpc.virtimo.net/forms/1/schema",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "defaultLanguage": "de",
    "submitUrl": "/test"
  },
  "components": [
    {
      "type": "container",
      "components": [
        {
          "type": "combobox",
          "value": "/data/selection",
          "options": "/data/options"
        },
        {
          "type": "html",
          "value": "/data/text/label"
        },
        {
          "type": "textfield",
          "label": { "de": "Textfeld", "en": "textfield" },
          "value": "/data/text/label"
        },
        {
          "type": "html",
          "value": "Nur auf deutsch zu sehen.",
          "hidden": "/language != 'de'"
        },
        {
          "type": "html",
          "value": "Only available in English.",
          "hidden": "/language != 'en'"
        },
        {
          "type": "button",
          "label": { "de": "senden", "en": "submit" },
          "action": "submit"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "selection": "two",
      "options": [
        { "value": "one", "label": { "de": "Eins", "en": "One" } },
        { "value": "two", "label": { "de": "Zwei", "en": "Two" } }
      ],
      "text": {
        "label": {
          "de": "Deutscher Text",
          "en": "English text"
        }
      }
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: