Form.io Embedded Form Builder

by brendanbond

HTML

<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<div class="container">
  <div id="formio">
  </div>
</div>

JavaScript

const formDef = {
  "display": "form",
  "components": [{
    "label": "Data Grid",
    "reorder": false,
    "addAnotherPosition": "bottom",
    "layoutFixed": false,
    "enableRowGroups": false,
    "initEmpty": false,
    "tableView": false,
    "defaultValue": [{}],
    "key": "dataGrid",
    "type": "datagrid",
    "input": true,
    "components": [{
        "label": "Text Field",
        "applyMaskOn": "change",
        "tableView": true,
        "key": "textField",
        "type": "textfield",
        "input": true
      },
      {
        "label": "Text Field",
        "applyMaskOn": "change",
        "tableView": true,
        "key": "textField1",
        "type": "textfield",
        "input": true
      }
    ]
  }]
}
Formio.createForm(document.getElementById('formio'), formDef).then((form) => {
  form.submission = {
    data: {
      dataGrid: [{
          "textField": "Hello",
          "textField1": "World"
        },
        {
          "textField": "Hello ",
          "textField1": "Again"
        }
      ]
    }
  }
})