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.

Alt text

Using the Form Renderer

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

Options

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.