Form.io

This page is intended for technical users looking to make changes to how CHEFS uses form.io. The initialization of CHEFS works as follows:

Register form.io modules
Load keycloak
Initialize Vue

In this configuration, modules are registered prior to starting Vue and are not registered post initialization.

Modules

Form.io can be customized by creating and registering custom modules. These custom modules alter the behaviour of the form.io builder and renderer. You need a minimum version of formio.js v4.5.0 and is documented here. Form.io allows you to customize the following modules: components, templates, providers, displays, builders, options, fetch, framework. CHEFS is currently customizing components and providers.

Components

In the stable release of CHEFS v1.3.0, custom components are created and built prior to deployment. Once deployed, the components are registered in the initialization process of the application.

Solutions

We can create our custom components and host them internally in CHEFS or externally, and register the modules post deployment. This would require a comparison check between what the user has on their computer and what exists on the server. Any changes would need to be downloaded to the users computer. This comparison would need to occur every time they are going to use http://form.io in any way. A means of reducing the bandwidth between checks could be a simple hash of the components on the user’s end compared against the hash of the components on the server end. A deeper comparison can be made if there is a difference in the hash.

This method works and can be seen in this repository: https://github.com/jasonchung1871/common-hosted-form-service/tree/post-init-modules

It is important that you include the Formio.use(yourModuleName) inside of your custom component, as CHEFS will not be able to use your module without knowing it’s variable name.

Prototype

Import Data

Currently, there is a working prototype of this solution. When importing a components module, you must specify how the builder can use it, like so:

{
  "components":{
     "builderCategories": {
       "layoutControls":{
          "title":"Basic Layout",
          "default":true,
          "weight":10
       },
       "entryControls":{
          "title":"Basic Fields",
          "weight":20
       },
       "layout":{
          "title":"Advanced Layout",
          "weight":30
       },
       "advanced":{
          "title":"Advanced Fields",
          "weight":40
       },
       "data":{
          "title":"Advanced Data",
          "weight":50
       },
       "customControls":{
          "title":"BC Government",
          "weight":60
       }
     },
     "builder":{
        "layoutControls":{
           "simplecols2":true,
           "simplecols3":true,
           "simplecols4":true,
           "simplecontent":true,
           "simplefieldset":false,
           "simpleheading":false,
           "simplepanel":true,
           "simpleparagraph":false,
           "simpletabs":true
        },
        "entryControls":{
           "simplecheckbox":true,
           "simplecheckboxes":true,
           "simpledatetime":true,
           "simpleday":true,
           "simpleemail":true,
           "simplenumber":true,
           "simplephonenumber":true,
           "simpleradios":true,
           "simpleselect":true,
           "simpletextarea":true,
           "simpletextfield":true,
           "simpletime":false
        },
        "advanced":{
           "textfield":true,
           "textarea":true,
           "number":true,
           "password":true,
           "checkbox":true,
           "selectboxes":true,
           "select":true,
           "radio":true,
           "button":true,
           "orgbook":false
        },
        "customControls":{
           "orgbook":true,
           "simplefile": {
            "userType": {
              "blacklist": ["public"]
            }
           }
        }
     }
  }
}

You specify the categories that exist for this module, the parameters can be found Custom Components | Form.io Documentation in the function builderInfo :

{
  "components": {
    "builderCategories": {
      "layoutControls": {
        ...

Afterwards, you specify the components that you’re enabling or disabling within a category. Normally, it would look like

{
  "components": {
    "builder": {
      "layoutControls": {
        "simplecols2": true,
        ...

You may want to blacklist certain user types from accessing a component. For example, file uploads are not allowed for public forms. This would look like:

Administrator

As an administrator, you can import new modules, update existing ones, and toggle whether a module is enabled or not.

Displays all modules imported into CHEFS

User

As any user of the system, authenticated or not, you will need to load form modules when viewing a form.

Modules will be imported from an external source specified by each form module version. Once complete, CHEFS will register the components and re-render the form builder. A form version is a version of a form that can’t be modified as it is published and can be accessed for form submission. Each form version will also use the same form module versions it was published with. This way, you’ll always see form submissions and the form the same way it was published.