Localisation

Form definitions can be multi-language.

See example:

{
  "rows": [
    {
      "cols": [
        {
          "type": "text",
          "label": "Número de Apartamento",
          "value": "{{aptnum}}",
          "extraSettings": {
            "min": 1,
            "minValueErrorMessage": "El número de apartamento debe ser mayor o igual que 1"
          },
          "i18n": {
            "en_us": {
              "label": "Apartment number",
              "extraSettings": {
                "minValueErrorMessage": "Apartment number must be greater or equal to 1"
              }
            },
            "en_uk": {
              "label": "Flat number",
              "extraSettings": {
                "minValueErrorMessage": "Flat number must be greater or equal to 1"
              }
            }
          }
        }
      ]
    }
  ]
}

There is one default language and a list of additional languages inside the i18n attribute.

The <Form> uses its lang prop to choose between the languages inside the i18n attribute of component definitions. If the provided lang doesn't match any of the languages, the default one is used.

Additionally there are some texts provided by Flowable Forms. You can extend or replace them by providing the translations prop to <Form>. In this example, if the minValueErrorMessage wasn't provided in the component definition, the default validation message "Field must be a number greater than or equal to {{extraSettings.min}}" would be used. The default content of translations prop is: