Multilingual content

Texts such as those used for the Labels can also be written in multiple languages. In this case, the text is replaced by a JSON object. In this object, you can store a text 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 example, for the component Combo box component. Labels are translated here, as at component level. This can also be used for other components by using Data binding is applied 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: