Fork me on GitHub

External Data Load

You can load in data from an external API as a result of values entered in a form.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<div id="formio"></formio>
Formio.icons = 'fontawesome';
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/customerload')
  .then(function(form) {
    // Triggered when they click the submit button.
    form.on('change', function(event) {
      if (event.changed && event.changed.component.key === 'customerNumber' && event.changed.value) {
        fetch('https://examples.form.io/customers/submission?data.number=' + event.changed.value, {
          headers: {
            'content-type': 'application/json'
          },
          mode: 'cors',
        })
        .then(function(response) {
          response.json().then(function(result) {
            if (Array.isArray(result) && result.length > 0) {
              var submission = { data: event.data };
              submission.data.name = result[0].data.name;
              submission.data.phoneNumber = result[0].data.phonenumber;
              form.submission = submission;
            }
          });
        });
      }
    });
  });

Result


powered by

Copyright © Form.io LLC 2019. All rights reserved

Renderer v