Form Renderer
This library includes a robust, plain JavaScript, form rendering engine that is capable of dynamically generating Webforms using a JSON schema. A very simple example of this, is as follows.
<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/[email protected]/dist/formio.form.min.css'>
<script src='https://unpkg.com/[email protected]/dist/formio.form.min.js'></script>
<script type='text/javascript'>
window.onload = function() {
var form = new FormioForm(document.getElementById('formio'));
form.form = {
components: [
{
type: 'textfield',
key: 'firstName',
label: 'First Name',
placeholder: 'Enter your first name.',
input: true
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
placeholder: 'Enter your last name',
input: true
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary'
}
]
};
};
</script>
</head>
<body>
<div id='formio'></div>
</body>
</html>You can also use this renderer with Forms generated using Form.io using the src parameter. An example of this is as follows.
<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/[email protected]/dist/formio.form.min.css'>
<script src='https://unpkg.com/[email protected]/dist/formio.form.min.js'></script>
<script type='text/javascript'>
window.onload = function() {
var form = new FormioForm(document.getElementById('formio'));
form.src = 'https://examples.form.io/example';
};
</script>
</head>
<body>
<div id='formio'></div>
</body>
</html>This will render the following form within your application.
The form renderer is utilized by creating an instance of the FormioForm class. This class has the following signature.
var form = new Formio([element], [options]);| Property | Description | Example |
|---|---|---|
| element | The HTML DOM element you would like to render the form within. | document.getElementById('formio') |
| options | The options to alter behavior of the rendering. | See below |
The following options are available and can be provided to the renderer as follows.
var form = new Formio(document.getElementById('formio'), {
readOnly: true
});
| Option | Description | Default |
|---|---|---|
| readOnly | If the form should render as disabled (read only) | false |
| noAlerts | If the form should not render the alerts dialog on top of the form. Pass "true" to disable. | false |
| i18n | An instance the translation you would like to provide to the renderer. | See this file for an example. |
| template | Provides a way to hook into the generation of the rendering of each element. | See templating section |
| inputsOnly | If you wish to only show the inputs only and no labels, etc. | false |
These are two ways to render a form. By either providing the JSON schema to the form, or by providing the Form.io Embed URL to the object. Both of these work as follows.
var form = new FormioForm(document.getElementById('formio'));
form.form = {
components: [
{
type: 'textfield',
key: 'firstName',
label: 'First Name',
placeholder: 'Enter your first name.',
input: true
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
placeholder: 'Enter your last name',
input: true
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary'
}
]
};Render a Form URL from Form.io
var form = new FormioForm(document.getElementById('formio'));
form.src = 'https://examples.form.io/example';Once you have the form rendered, the next thing you can do is set the submission of the form. This can be done with the submission property of the form renderer like so.
var form = new FormioForm(document.getElementById('formio'));
form.src = 'https://examples.form.io/example';
form.submission = {
data: {
firstName: 'Joe',
lastName: 'Smith',
email: '[email protected]'
}
};You can also make this a "read-only" submission view by setting the readOnly property on the form renderer.
var form = new FormioForm(document.getElementById('formio'), {
readOnly: true
});
form.src = 'https://examples.form.io/example';
form.submission = {
data: {
firstName: 'Joe',
lastName: 'Smith',
email: '[email protected]'
}
};Once a form is created, it will create an instance of the FormioForm class. The following methods can then be used on that form.
| Method | Description | Example |
|---|---|---|
| setForm | Sets the form JSON | form.setForm({components:[....]}) |
| reset | Resets the submission object resetting all the fields to their defaults or empty. | form.reset() |
| render | Renders, or re-renders, the form | form.render() |
| setAlert | Adds a new alert to the form. Set to false to clear | form.setAlert('danger', 'This is an alert!') |
| showErrors | Shows all the errors of the form in the alert box. | form.showErrors() |
| on | Registers for an event triggered within the form renderer. | form.on('error', () => {}); |
| submit | Submits the form. | form.submit() |
Another major element of the Form renderer is to register for a triggered event within the Form renderer. For example, you may wish to register for the error event and handle that within your application. Or you may wish to know when the user submits the form so that you can handle the submission object within your application. This uses the event system to notify your application of certain events from happening. For example, you could handle the submission and errors of the form doing the following.
var form = new FormioForm(document.getElementById('formio'), {
readOnly: true
});
form.src = 'https://examples.form.io/example';
form.on('submit', (submission) => {
console.log('The form was just submitted!!!);
});
form.on('error', (errors) => {
console.log('We have errors!');
})