...
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:
| Code Block |
|---|
{
"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 :
| Code Block |
|---|
{
"components": {
"builderCategories": {
"layoutControls": {
... |
Afterwards, you specify the components that you’re enabling or disabling within a category. Normally, it would look like
| Code Block |
|---|
{
"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:
| Code Block |
|---|
{
"components": {
"builder": {
"customControls": {
"simplefile": {
"userType": {
"blacklist": ["public"]
}
},
... |
Administrator
As an administrator, you can import new modules, update existing ones, and toggle whether a module is enabled or not.
...
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.