Modules

Modules

Modules were introduced in formio.js v4.5.0. You need a version later than that to utilize modules. The Form.io Renderer allows for a number of extensions, which allows for external libraries the ability to alter the behavior of this library. The following extensions 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.

Available Modules

Bootstrap 3 (Automatically included in 4.x but external for 5.x)

• https://github.com/formio/bootstrap3
• @formio/bootstrap3

Semantic UI (Automatically included in 4.x but external for 5.x)

• https://github.com/formio/semantic
• @formio/semantic

Bulma

• https://github.com/formio/bulma
• @formio/bulma

Gov.uk Design System

• https://github.com/DigitalPatterns/formio-gds-template
• @digitalpatterns/formio-gds-template

United States Web Design System

• Enterprise plans only

Contrib components

• Coming soon

Premium components

• Enterprise plans only

If you have developed an additional module and would like it listed here, please contact [email protected] and let us know.

Creating a module

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
  }
}

Module plugins

A module consists of a bunch of plugins that are provided to the module via the "name" of the plugin. The following plugins are available for modules.

framework

This sets the default "style" framework.

Example

{
  framework: 'semantic'
}

components

Provides a way to override existing components, or introduce new components to the renderer/builder.

templates

Introduces new templates to the renderer for use with custom components or for overriding existing templates.

fetch

Allows a custom "fetch" plugin to be utilized for this renderer. All API requests will then be sent through this fetch plugin instead of the default Formio.fetch interface (which is the standard Web fetch interface).

providers

Allows the introduction of different providers as follows.

storage

Storage providers allow file upload interfaces. Such as Azure Blob, Dropbox, etc.

auth

Authentication providers such as Okta, OAuth, SAML, etc.

address

Address providers such as Google Maps, Open Street Maps, etc.

displays

Introduces new or overrides existing Display interfaces, such as Wizard, Form, or PDF

rules

Introduces new or overrides existing validation rules.

options

Allows the overriding of Form and Builder options. Must be in the following format.

{
  options: {
    form: {}, /* Provides the default options for Formio.createForm */
    builder: {} /* Provides the default options for Formio.builder */
  }
}

Register a module

To register the module into the renderer, you must use the use method, whereas you will pass the Module definition 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