Multilingual content

Texts such as those used for Labels can also be written in multiple languages. In this case, the text is replaced by a JSON object. A text can be stored in this object for each desired language. The ISO 639-1 code of the country serves as the key attribute and the text as the value.

Example

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

Multilingualism can also be used in the state. This is used for the combobox component, for example. Labels are translated here, as at component level. This can also be used for other components by applying data binding to objects whose path ends with label. All objects with label in the path are attempted to be translated. Objects that do not have label in the path are not translated.

The current language itself is stored in the state under language and can be used, for example, to display components only in the corresponding language.

Example

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

Embedded preview

open preview in separate window

Keywords: