Form-builder
Plugin Options Interface
interface PluginOptions {
selector: string
token?: string
onComplete: (result: PluginResult) => any
data: DataScheme
// page options data such as statusId, customerNumber, customerRole
options: Record<string, any>
}
Basic example of fields (without any conditions)
This is the simple examples of the field variants (types) that we have in our plugin
[
{
"formName": "formName_01"
},
{
"groups": [
{
"groupName": "Informazioni Generali",
"tabName": "Dati pratica",
"tab": true,
"column": true,
"content": {
"rows": [
{
"name": "firstRow",
"column": true,
"fields": [
{
"Type": "date",
"id": "DamageDate",
"label": "Data Sinistro"
},
{
"Type": "string",
"id": "String_example",
"label": "String Example"
},
{
"Type": "checkbox",
"id": "checkbox_test",
"label": "Checkbox example"
},
{
"Type": "float",
"id": "float_test",
"label": "Float example"
},
{
"Type": "integer",
"id": "integer_test",
"label": "Integer example"
},
{
"Type": "memo",
"id": "memo_test",
"label": "Memo example"
},
{
"Type": "select",
"id": "select_test",
"label": "Select example"
},
{
"Type": "boolean",
"id": "boolean_test",
"label": "Boolean example"
},
{
"Type": "radio",
"id": "radio_test",
"label": "Radio example"
},
{
"Type": "subject",
"id": "subject_test",
"label": "Subject example"
},
{
"Type": "button",
"id": "button_test",
"label": "Button example"
},
{
"Type": "submit",
"id": "submit_test",
"label": "Submit example"
},
{
"Type": "result",
"id": "result",
"label": "Result",
"visible": true,
"calculation": "10 + 10"
}
]
}
]
}
}
]
},
{
"conditions": []
}
]
<!DOCTYPE html>
<html lang="en" translate="no">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Builder</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
window.FORM_BUILDER &&
window.FORM_BUILDER.init({
selector: '#root',
onComplete: (result) => {
console.log(result)
},
data: [
{
formName: 'formName_01'
},
{
groups: [
{
groupName: 'Informazioni Generali',
tabName: 'Dati pratica',
tab: true,
column: true,
content: {
rows: [
{
name: 'firstRow',
column: true,
fields: [
{
Type: 'date',
id: 'DamageDate',
label: 'Data Sinistro'
},
{
Type: 'string',
id: 'String_example',
label: 'String Example'
},
{
Type: 'checkbox',
id: 'checkbox_test',
label: 'Checkbox example'
},
{
Type: 'float',
id: 'float_test',
label: 'Float example'
},
{
Type: 'integer',
id: 'integer_test',
label: 'Integer example'
},
{
Type: 'memo',
id: 'memo_test',
label: 'Memo example'
},
{
Type: 'select',
id: 'select_test',
label: 'Select example'
},
{
Type: 'boolean',
id: 'boolean_test',
label: 'Boolean example'
},
{
Type: 'radio',
id: 'radio_test',
label: 'Radio example'
},
{
Type: 'subject',
id: 'subject_test',
label: 'Subject example'
},
{
Type: 'button',
id: 'button_test',
label: 'Button example'
},
{
Type: 'submit',
id: 'submit_test',
label: 'Submit example'
},
{
Type: 'result',
id: 'result_test',
label: 'Result example'
}
]
}
]
}
}
]
}
]
})
})
</script>
</body>
</html>