...
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:
| 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"]
}
},
... |