Form.io Dynamic Translations

by brendanbond

HTML

<script src="https://cdn.form.io/formiojs/formio.form.min.js"></script>
<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container">
<div id="formio"></div>
</div>

JavaScript

const formDef = {
  "_id": "578f930ef1912f8000459a50",
  "machineName": "examples:wizard",
  "modified": "2023-04-25T21:16:02.821Z",
  "title": "Wizard",
  "display": "wizard",
  "type": "form",
  "name": "wizard",
  "path": "wizard",
  "project": "5692b91fd1028f01000407e3",
  "created": "2016-07-20T15:04:46.906Z",
  "components": [{
      "key": "page1",
      "input": false,
      "components": [{
          "type": "textfield",
          "multiple": true,
          "key": "textfieldonpage1",
          "label": "Textfield on page 1",
          "tableView": true,
          "input": true
        },
        {
          "type": "number",
          "validate": {
            "required": true
          },
          "defaultValue": 0,
          "key": "numberField",
          "label": "Number Field",
          "inputType": "number",
          "tableView": true,
          "input": true
        }
      ],
      "title": "First",
      "type": "panel",
      "tableView": false,
      "label": "Panel"
    },
    {
      "tableView": false,
      "key": "page2",
      "input": false,
      "components": [{
          "type": "textfield",
          "validate": {
            "required": true
          },
          "key": "textfieldonPage2",
          "label": "Textfield on Page 2",
          "tableView": true,
          "input": true
        },
        {
          "input": true,
          "tableView": true,
          "label": "Customer",
          "key": "page2Customer",
          "placeholder": "Select a customer",
          "data": {
            "url": "https://examples.form.io/customer/submission",
            "headers": [{
              "value": "",
              "key": ""
            }]
          },
          "dataSrc": "url",
          "valueProperty": "data.email",
          "template": "<span>{{ item.data.firstName }} {{ item.data.lastName }}</span>",
          "type": "select",
          "widget": "html5",
          "searchField": "data.email"
        },
        {
    ...