Form.io Core Load Data

Form.io Core Load Data

by Mike Cunneen

HTML

<head>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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>
  <!-- <script type='text/javascript' src='YourJavascriptLinkHere'>  -->
</head>

<body>
  <div id='formio'></div>
</body>

CSS

#formio {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  min-height: 700px;
}

JavaScript

import ParentForm from './parentform.json';
console.log(ParentForm);
import NestedForm from './nestedform.json';
Formio.createForm(document.getElementById('formio'), ParentForm, {
  readOnly: false
}).then(function(form) {

  // Set Example Submission Object
  form.submission = { data: { 
    defaultPopulate: 'Populating...' 
  } };
  
  // Monitor Change Event 
  form.on('change', function(event) {
    if (event.changed) {

      // Only check if option component is changed/updated
      if (event.changed.component.key === 'parentSelect') {
        if (form.data.parentSelect === 'option1') {
          form.submission = { data: { theNestedForm: { data: {
            populate: 'Option 1 Selected'
          } } } };
        } 

        if (form.data.parentSelect === 'option2') {
          form.submission = { data: { theNestedForm: { data: {
            populate: 'Option 2 Selected'
          } } } };
        } 

        if (form.data.parentSelect === 'option3') {
          form.submission = { data: { theNestedForm: { data: {
            populate: 'Option 3 Selected'
          } } } };
        } 
      }
    }
  });

  // Populate the subform manually
  form.on('manualEvent', function(click) {
    form.submission = { data: { theNestedForm: { data: {
      populate: 'Manual Event Load'
      } } } };
  });

  // Formio Submission Event
  form.on('formioFetch', function(click) {  
    var formio = new Formio(NestedForm + '/submission/5ac414003c2be207cdd2ca30');

    // Return a submission with value of "Option 1"
    formio.loadSubmission().then(function(response) {
      form.submission = { data: { theNestedForm: { 
        data: response.data
      } } };          
    }); 
  });

  // Pure JS Fetch Event
  form.on('httpFetch', function(click) {

    // Return a submission with value of "Option 2"
    fetch(NestedForm + '/submission/5ac41406fad38bed1a04174a').then(function(response) {
      return response.json();
    }).then(function(res) {
      form.submission =...