VanillaJS Form.io Renderer

by brendanbond

HTML

<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="page-content">
  <div class="container-fluid">
    <div id="formio"></div>
  </div>
</div>

JavaScript

Formio.createForm(document.getElementById('formio'), {
  components: [{
    label: 'Children',
    key: 'children',
    type: 'datagrid',
    input: true,
    validate: {
      minLength: 3,
      maxLength: 6
    },
    components: [{
        label: 'First Name',
        key: 'firstName',
        type: 'textfield',
        input: true
      },
      {
        label: 'Last Name',
        key: 'lastName',
        type: 'textfield',
        input: true
      },
      {
        label: 'Gender',
        key: 'gender',
        type: 'select',
        input: true,
        data: {
          values: [{
              value: 'male',
              label: 'Male'
            },
            {
              value: 'female',
              label: 'Female'
            },
            {
              value: 'other',
              label: 'Other'
            }
          ]
        },
        dataSrc: 'values',
        template: '<span>{{ item.label }}</span>'
      },
      {
        type: 'checkbox',
        label: 'Dependant',
        key: 'dependant',
        inputType: 'checkbox',
        input: true
      },
      {
        label: 'Birthdate',
        key: 'birthdate',
        type: 'datetime',
        input: true,
        format: 'yyyy-MM-dd hh:mm a',
        enableDate: true,
        enableTime: true,
        defaultDate: '',
        datepickerMode: 'day',
        datePicker: {
          showWeeks: true,
          startingDay: 0,
          initDate: '',
          minMode: 'day',
          maxMode: 'year',
          yearRows: 4,
          yearColumns: 5,
          datepickerMode: 'day'
        },
        timePicker: {
          hourStep: 1,
          minuteStep: 1,
          showMeridian: true,
          readonlyInput: false,
          mousewheel: true,
          arrowkeys: true
        }
      },
    ],
  },
  {
      label: "Filter By Gender",
      action: "custom",
      key: "filterByGender",
      type: "button",
      custom: "filterByGender(instance, data)"
   ...