LogoLogo
Getting StartedDevelopersDeployment GuideGet Help
  • Quick Links
  • Welcome to Form.io
    • Getting Started With Form.io
    • Launch a Form
    • Overview of Form.io
  • Developer Tool Ecosystem
    • PDF Solution
    • Enterprise Form Builder
    • Form View Pro
    • The Security Module
    • Accessibility Compliance Module
    • Developer License
    • SQL Connector - Deprecated
    • Integration Libraries
    • Form.io CLI Tool
  • User Guide
    • Introduction
    • Form.io Developer Portal
    • Teams
    • Projects
      • Project UI
      • Project Settings
      • Stages
      • Multi-Tenancy
    • Resources
      • ResourceJS
    • Forms
      • Form Creation
      • Form Types
      • PDF Forms
      • Embedding a Form
      • Form Revisions
      • Form Settings
    • Form Building
      • Form Builder UI
      • Form Components
        • Component Settings
        • Basic Components
          • Resource as Select Component Data Source
        • Advanced Components
        • Layout Components
        • Data Components
        • Premium Components
          • Nested Forms
        • Custom Components
      • Logic & Conditions
      • Existing Resource Fields
      • Actions
    • Submissions
      • Accessing Submissions
      • Importing Submissions
    • Form.io eSignature - Coming Soon
    • Form.io Reporting Module
    • PDF Template Designer
    • Form View Pro
    • Form Manager
    • Enterprise Form Builder Module
      • Installation
      • User Guide
  • Developer Guide
    • Introduction
      • Application Development
      • API Documentation
    • Form Development
      • Form Renderer
      • Form Builder
      • Form Embedding
      • Form Evaluations
      • Form Templates
      • Custom Components
      • Translations
    • JavaScript Development
      • JavaScript SDK
      • JavaScript Frameworks
      • JavaScript Utilities
    • Authentication and Authorization
      • SAML
      • OAuth
      • LDAP
      • Resource Based Authentication
      • Email Authentication
      • Two-Factor Authentication
    • Roles and Permissions
      • Field Match-Based Access
      • Field-Based Resource Access
      • Group Permissions
    • Integrations
      • Email Integrations
      • File Storage
      • Google Developer Console
      • eSign Integrations
      • Relational Databases
    • Modules
    • Fetch Plugin API
    • CSS Frameworks
    • Offline Mode
    • Audit Logging
  • Deployments
    • Self-Hosted Deployment
      • Local Deployment
        • Local File Storage
      • Kubernetes
      • Cloud Deployment
        • AWS Deployment
          • AWS Lambda
          • Form.io/AWS Elastic Beanstalk End-To-End Encrypted Deployment
        • Azure Deployment
          • Azure App Service
            • Azure MSSQL Connector - Deprecated
          • Azure Virtual Machine
          • Azure Kubernetes Service
          • Set up the DB
        • GCP Deployment
          • GCP Cloud Run
      • On-Premise Deployment
      • Enterprise Server
      • PDF Server
    • Deployment Configurations
      • DNS Configuration
      • Load Balancer Configuration
    • Licenses
      • License Management
      • Library Licenses
    • Portal Base Project
      • Portal SSO
      • Portal Translations
    • Maintenance and Migration
      • Changes to Premium Libraries
  • FAQ
    • FAQ
    • Tutorials & Workflows
      • Password Reset
      • Dynamic Select Filtering
      • Approval Workflow
      • SSO Email Token
      • Embedding A Video
      • Data Source Validation
      • Select Data Source Options
      • Nested Form Workflows
        • Nested Wizard Forms
      • Save as Draft
      • Role-Based Conditions
      • Custom Component
      • Dynamic Radio and Select Box Values
      • Override CKEDITOR
    • Errors
    • Examples
    • License Utilization Checks
  • Contact Us
Powered by GitBook
On this page
  • Creating a module
  • Using a Module
  • Module plugins
  • framework
  • components
  • templates
  • fetch
  • providers
  • displays
  • rules
  • options
  • Register a module
  • Existing Modules

Was this helpful?

  1. Developer Guide

Modules

Describes the Form.io Module system

PreviousRelational DatabasesNextFetch Plugin API

Last updated 5 months ago

Was this helpful?

Modules allow developers to create encapsulated module bundles that alter the behavior of the Form.io Builder and Renderer. The Form Module is located within your Stage settings.

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 plugins, which allows for external libraries the ability to alter the behavior of this library. Each plugin is defined in a module using a simple key-pair map like the following illustrates.

{
    components: {...},
    templates: {...},
    providers: {...},
    displays: {...}
}

The following plugins can be provided within a module.

Plugin

Description

components

Allows for Custom Components to be introduced into the renderer.

templates

Allows for you to introduce new templates and CSS frameworks (such as Bootstrap, Semantic, etc)

providers

Allows for custom storage providers for file components

displays

Provides a way to provide new and override the form renderer displays.

builders

Provides a way to provide new and override the form builders

options

Allows a way to override options passed into the renderer and the builder.

fetch

Provides a way to intercept all API requests made into the Form.io renderer.

framework

Allows for the CSS framework to be forced when loaded.

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

Each of the keys within this object are called Plugins and they each have their own object definitions as follows

Using a Module

Once you have a module created, it is very easy to use the module within the Form.io renderer. You simply import the module, and then use the Formio.use method to use it. The following is an example of how a module is used.

import { CustomModule } from './modules/custom';
Formio.use(CustomModule);

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. Here is a simple of example of adding a new component.

components/CustomButton.js

import { Components } from 'formiojs';
const ButtonComponent = (Components as any).components.button;
class CustomButton extends ButtonComponent {
    get inputInfo() {
        const inputInfo = super.inputInfo;
        inputInfo.attr.class += ' custom-button';
        return inputInfo;
    }
}

module.js

import { CustomButton } from './components/CustomButton.js';
export default {
    components: {
        button: CustomButton
    }
}

templates

fetch

providers

Allows the introduction of different providers as follows.

Provider

Description

storage

auth

address

displays

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

rules

Introduces new or overrides existing validation rules. Coming soon.

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

For an example of a custom component module, take a look at the

Introduces new templates to the renderer for use with custom components or for overriding existing templates. See section for more details.

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). For detailed documentation, please see the documentation.

Storage providers allow file upload interfaces. Such as Azure Blob, Dropbox, etc. For examples, go to

Authentication providers such as Okta, OAuth, SAML, etc. For examples, go to

Address providers such as Google Maps, Open Street Maps, etc. For examples, go to

See and .

Contrib Module
Form Templates
Fetch Plugin API
Contrib Components
United States Web Design System
Bootstrap 3 Template
Semantic UI Template
Bulma Template
https://github.com/formio/formio.js/tree/master/src/providers/storage
https://github.com/formio/formio.js/tree/master/src/providers/auth
https://github.com/formio/formio.js/tree/master/src/providers/address
Builder Options
Form Options