Multilingual Content

Text, such as that used for 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 text for any 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"
    }
  }

Multilingual support can also be used in the state property. This is used, for example, for the combo box component. Here, just as at the component level, Labels are translated. This can also be used for other components by applying data binding to objects whose path ends with label. The system attempts to translate all objects with label in their path. Objects that do not have label in their 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": "https://forms.virtimo.net/4.1.x/schema.json",
  "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 a separate window

Keywords: