How do I use the Translations Area?

The translation file allows the form to be serviced in multiple languages by providing the system a translation of the text used in the form/workflow in another language. This is just a simple JSON file that specifies the language to be translated into and allows all the applicable text to be listed. 

The following example shows a translation file that defines a translation for "Zip Code" and "First Name" in both Spanish and French. So instances of the text "Zip Code" or "First Name" will be adjusted to show the translation provided in the language currently selected on the form.

The format for accepted JSON for the Translations Area has been updated in preparation for the Translations Visual Editor. When the Translations Visual Editor is released, the UUIDs will be auto-generated. In the code editor, these will need to be manually added. The only requirement is that the UUID is unique to the form, so you can enter random text, or use a UUID generator.

"dynamic": {
  "49b2f6b35b144ff3b041a01a4c673cbd": {
    "es": {
      "translation": "Código Postal",
      "origin": "Zip Code"
      },
    "fr": {
      "translation": "Code Postal",
      "origin": "Zip Code"
    }
  },
  "fe6a4e10bf8a4ab9a684631ce9681003": {
    "es": {
       "translation": "Nombre",
       "origin": "First Name"
    },
    "fr": {
       "translation": "Prénom",
       "origin": "First Name"
    }
  }
}

The languages used in this translation file are specified using ISO 639-1 and a list of these codes can be found here.

If translations are employed, it is required that your layout file has a language component defined with the language codes you've defined in your file included in the onlyInclude prop. An example of this component catered to the above JSON is shown below.

<Language onlyInclude={["en", "es","fr"]} />

Notice that "en" (English) is included in addition to "es" and "fr" to allow for English to be an available selection.