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
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 https://help.form.io/developers/custom-components 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:
{
"components": {
"builder": {
"customControls": {
"simplefile": {
"userType": {
"blacklist": ["public"]
}
},
...