Example of notVisible logic in groups
The notVisible property can also be applied at the group level. Specifically, the Informazioni Sinistra group will be visible only under certain conditions: it must be displayed when the vehicleStatus is equal to 'Auto Sostitutiva' and the carVin is equal to 'test'. This means that both conditions must be satisfied for the group to be shown; if either condition is not met, the group will remain hidden.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin style -->
<link
href="https://plugins.wedat.eu/form-builder/plugin.css"
rel="stylesheet"
/>
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>
<!-- load plugin JS synchronously -->
<script src="https://plugins.wedat.eu/form-builder/plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
window.FORM_BUILDER.init({
selector: '.plugin',
onComplete: (res) => {
// make what your want :)
console.log(res)
},
data: [
{
formName: 'formName_01'
},
{
groups: [
{
groupName: 'Informazioni Generali',
tabName: 'Dati pratica',
tab: true,
column: true,
content: {
rows: [
{
name: 'firstRow',
column: true,
fields: [
{
Type: 'string',
id: 'vbrand',
label: 'Marca',
visible: true,
readOnly: false
},
{
Type: 'string',
id: 'vehicleStatus',
label: 'vehicle Status'
},
{
Type: 'string',
id: 'carVIN',
label: 'car VIN'
}
]
}
]
}
},
{
groupName: 'Informazioni Sinisitra',
tabName: 'Dati pratica',
tab: true,
column: true,
notVisible: {
roles: [],
statuses: [],
fields: [
{
key: 'vehicleStatus',
value: 'Auto Sostitutiva',
operator: '!=='
},
{
key: 'carVIN',
value: 'test',
operator: '==='
}
],
compareConditionForFields: '&&',
compareConditionForVisibility: {
role_status: '||',
role_fields: '||',
status_fields: '||'
}
},
content: {
rows: [
{
name: 'firstRow',
column: true,
fields: [
{
Type: 'date',
id: 'DamageDate',
label: 'Data Sinistro',
visible: true,
format: 'alternative'
},
{
Type: 'string',
id: 'DamageNumber',
label: 'Numero Sinistro',
visible: true,
withSubjectButton: true
},
{
Type: 'string',
id: 'insurance_name',
label: 'Compagnia',
visible: false,
initValue: ''
}
]
}
]
}
}
]
},
{
conditions: []
}
],
options: {} // page options
})
</script>
</body>
</html>