Modules

Modules

The Form.io Renderer allows for a number of modules, which allows for external libraries the ability to alter the behavior of this library. The following modules can be provided.

• Templates: Allows for you to introduce new templates and CSS frameworks (such as Bootstrap, Semantic, etc)
• Components: Allows for Custom Components to be introduced into the renderer.
• Framework: Allows for the CSS framework to be forced when loaded.
• Providers: Allows for custom storage providers for file components (coming soon).
• Fetch: Provides a way to intercept all API requests made into the Form.io renderer.

Creating a plugin

New modules can be created by including an external Library within your application that has exports the following structure.

export default {
  framework: 'semantic', // Sets the default template to a specific framework.
  components: {
    /* List of custom components */
  },
  templates: {
    semantic: {
      /* List of templates found @ https://github.com/formio/formio.js/blob/master/src/templates/bootstrap/index.js */
    }
  },
  fetch: {
    fetchname: CustomFetchPluginClass
  }
}

Register a plugin

To register the plugin into the renderer, you must use the use method, whereas you will pass the Plugin class into this method.

Example

import MyModule from './MyModule';
import { Formio } from 'formiojs';
Formio.use(MyModule);

Existing Modules

• Semantic UI Template: https://github.com/formio/semantic
• Bulma Template: https://github.com/formio/bulma