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="container">
  <h3>
  Hi Istvan!
  </h3>
    <p>
    Buttons can do many things beyond submitting a form. They can POST to a URL, fire off an event that your application can listen to, or simply run custom javascript code. In this case, our button will fire off a fetch request to the <a href="https://swapi.dev/">Star Wars API</a> and display the response's name to the user in an alert.
    </p>
    <p>
    This code snippet shows how you might accomplish this in a client-side application. Your form builders can do something similar via the Button Component in the form builder (<a href="https://imgur.com/a/arBl0Ir">see this screenshot</a>).
    </p>
    <p>
    <img src="" />
    </p>
    <div id="formio"></div>
  </div>

JavaScript

const formDefinition = {
  "title": "Simple Form",
  "name": "simpleForm",
  "path": "simpleform",
  "type": "form",
  "display": "form",
  "tags": [],
  "components": [{
      "label": "Text Field",
      "tableView": true,
      "key": "textField",
      "type": "textfield",
      "input": true
    },
    {
      "label": "Fetch Data",
      "action": "custom",
      "showValidations": false,
      "tableView": false,
      "key": "submit",
      "type": "button",
      "custom": "fetch('https://swapi.dev/api/people/1')\n  .then((res) => res.json())\n  .then((res) => alert(`Received information about ${res.name}!`))",
      "input": true
    }
  ],
}

Formio.createForm(document.getElementById('formio'), formDefinition);