Skip to content

Latest commit

 

History

History
114 lines (110 loc) · 4.07 KB

builder.md

File metadata and controls

114 lines (110 loc) · 4.07 KB
title layout fluid section weight lib
Form Builder
default
true
builder
30
builder

The Form Builder allows you to build a FormWizardPDF

as JSON Schema


    

  





  

    
which Renders as a Form in your Application

    

  

  





  

    
which creates a Submission JSON

    

      

    

  

  





  

    
which submits to our API Platform

    
hosted or on-premise

    
  






  

    

      

        
We are Open Source!

        
We are proud to offer our core Form & API platform as Open Source.

        
Find us on GitHub @ https://github.com/formio/formio

      

    

    

      

      

        
Getting started is as easy as...

        
git clone https://github.com/formio/formio.git
cd formio
npm install
node server

      

    

  



<script type="text/javascript">
var jsonElement = document.getElementById('json');
var formElement = document.getElementById('formio');
var subJSON = document.getElementById('subjson');
var builder = new Formio.FormBuilder(document.getElementById("builder"), {
  display: 'form',
  components: [],
  settings: {
    pdf: {
      "id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
      "src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"
    }
  }
}, {
  baseUrl: 'https://examples.form.io'
});

var onForm = function(form) {
form.on('change', function() {
subJSON.innerHTML = '';
subJSON.appendChild(document.createTextNode(JSON.stringify(form.submission, null, 4)));
});
};


var setDisplay = function(display) {
builder.setDisplay(display).then(function(instance) {

instance.on('change', function(form) {
if (form.components) {
formElement.innerHTML = '';
jsonElement.innerHTML = '';
jsonElement.appendChild(document.createTextNode(JSON.stringify(form, null, 4)));
Formio.createForm(formElement, form).then(onForm);
}
});
});
};


// Handle the form selection.
var formSelect = document.getElementById('form-select');
formSelect.addEventListener("change", function() {
setDisplay(this.value);
});


setDisplay('form');
</script>