Form.io Lazy Load Renderer

by brendanbond

HTML

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

<div id="formio"></div>

</div>

CSS

.mycustomclass {
  background-color: #F3CA63 !important;
}

JavaScript

const formDefinition = {
  type: 'form',
  "components": [{
      "label": "Text Field",
      "applyMaskOn": "change",
      "tableView": true,
      "key": "textField",
      "type": "textfield",
      "input": true
    },
    {
      "label": "Edit Grid",
      "tableView": false,
      "rowDrafts": false,
      "key": "editGrid",
      "type": "editgrid",
      "displayAsTable": false,
      "input": true,
      "components": [{
          "label": "A",
          "applyMaskOn": "change",
          "tableView": true,
          "key": "a",
          "type": "textfield",
          "input": true
        },
        {
          "label": "B",
          "applyMaskOn": "change",
          "tableView": true,
          "key": "b",
          "type": "textfield",
          "input": true
        }
      ]
    },
    {
      "label": "Submit",
      "showValidations": false,
     
      "disableOnInvalid": true,
      "tableView": false,
      "key": "submit",
      "type": "button",
      "input": true,
      "saveOnEnter": false
    }
  ],
}
Formio.createForm(document.getElementById('formio'), formDefinition).then((form) => {
  form.submission = {
  "data": {
    "editGrid": [
      {
        "textField": "hello",
        "textField1": "world"
      }
    ],
    "submit": false
  }
};
})