You can load in data from an external API as a result of values entered in a form.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdn.form.io/js/formio.embed.js"></script>
<div id="formio"></div>
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
) {
Formio.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;
}
});
});
}
});
},
);