NOTVISIBLE
When the notVisible parameter includes a list of fields, the condition should compare each field, and if any of them satisfy the requirement, the current field will be hidden.
NotVisible consition in fields level
1. NotVisible example with fields condition
The `Marca` field should be hidden if `Field_1 === 12` or `Field_2 === 23`.
2. with parameter compareConditionForFields we can choose in which variant to make the comparision with ||(or) or with &&(and).
By default it is or(||).In this example it is set as compareConditionForFields: '&&'.
The `Marca` field should be hidden if `Field_3 === 21` and `Field_4 === 32`.
[
{
"formName": "formName_01"
},
{
"groups": [
{
"groupName": "fields condition withouth compareConditionForFields",
"tabName": "NotVisible Exmple with fields condition",
"tab": true,
"column": true,
"content": {
"rows": [
{
"name": "firstRow",
"column": true,
"fields": [
{
"Type": "integer",
"id": "field_1",
"label": "Field 1",
"visible": true
},
{
"Type": "integer",
"id": "field_2",
"label": "Field 2",
"visible": true
},
{
"Type": "string",
"id": "vbrand",
"label": "Marca",
"visible": true,
"readOnly": false,
"notVisible": {
"fields": [
{
"key": "field_1",
"value": "12",
"operator": "==="
},
{
"key": "field_2",
"value": "23",
"operator": "==="
}
]
}
}
]
}
]
}
},
{
"groupName": "fields condition with compareConditionForFields",
"tabName": "NotVisible Exmple with fields condition",
"tab": true,
"column": true,
"content": {
"rows": [
{
"name": "firstRow",
"column": true,
"fields": [
{
"Type": "integer",
"id": "field_3",
"label": "Field 3",
"visible": true
},
{
"Type": "integer",
"id": "field_4",
"label": "Field 4",
"visible": true
},
{
"Type": "string",
"id": "vbrand",
"label": "Marca",
"visible": true,
"readOnly": false,
"notVisible": {
"fields": [
{
"key": "field_3",
"value": "21",
"operator": "==="
},
{
"key": "field_4",
"value": "32",
"operator": "==="
}
],
"compareConditionForFields": "&&"
}
}
]
}
]
}
}
]
},
{
"conditions": []
}
]
<!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:
'fields condition withouth compareConditionForFields',
tabName: 'NotVisible Exmple with fields condition',
tab: true,
column: true,
content: {
rows: [
{
name: 'firstRow',
column: true,
fields: [
{
Type: 'integer',
id: 'field_1',
label: 'Field 1',
visible: true
},
{
Type: 'integer',
id: 'field_2',
label: 'Field 2',
visible: true
},
{
Type: 'string',
id: 'vbrand',
label: 'Marca',
visible: true,
readOnly: false,
notVisible: {
fields: [
{
key: 'field_1',
value: '12',
operator: '==='
},
{
key: 'field_2',
value: '23',
operator: '==='
}
]
}
}
]
}
]
}
},
{
groupName: 'fields condition with compareConditionForFields',
tabName: 'NotVisible Exmple with fields condition',
tab: true,
column: true,
content: {
rows: [
{
name: 'firstRow',
column: true,
fields: [
{
Type: 'integer',
id: 'field_3',
label: 'Field 3',
visible: true
},
{
Type: 'integer',
id: 'field_4',
label: 'Field 4',
visible: true
},
{
Type: 'string',
id: 'vbrand',
label: 'Marca',
visible: true,
readOnly: false,
notVisible: {
fields: [
{
key: 'field_3',
value: '21',
operator: '==='
},
{
key: 'field_4',
value: '32',
operator: '==='
}
],
compareConditionForFields: '&&'
}
}
]
}
]
}
}
]
},
{
conditions: []
}
],
options: {} // page options
})
</script>
</body>
</html>