NotVisible compareConditionForVisibility
In general, the keys inside the notVisible object are compared using the logical 'AND' (&&) condition by default. However, there may be cases where a user wants to apply an 'OR' (||) condition for comparisons. For such cases, there is an object called compareConditionForVisibility, which allows three variants for comparison logic:
1. role_status
"role_status": "||" means the current field will be hidden if either the user's role or the project status matches, given that the notVisible object contains both "roles" and "statuses".
2. role_fields
"role_fields": "||" applies when notVisible contains both "roles" and "statuses" arrays. In this case, the field (e.g., 'Marca') will be hidden if either the roles or the statuses match the condition.
3. status_fields
"status_fields": "||" follows the same logic but applies to both project status and the specified field conditions. The field will be hidden if either condition is met.
These variants provide flexibility for different visibility rules based on role, status, or field 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": "Informazioni Generali",
"tabName": "Dati pratica",
"tab": true,
"column": true,
"content": {
"rows": [
{
"name": "firstRow",
"column": true,
"fields": [
{
"Type": "string",
"id": "vbrand",
"label": "Should be hidden if all conditions are met",
"visible": true,
"readOnly": false,
"notVisible": {
"roles": [ "admin"],
"statuses": [ "Preventivo calcolato"],
"fields": [
{
"key": "vehicleKW",
"value": "12",
"operator": "==="
},
{
"key": "vehicleHP",
"value": "23",
"operator": "==="
}
],
"compareConditionForVisibility": {
"role_status": "||",
"role_fields": "||",
"status_fields": "||"
}
}
},
{
"Type": "integer",
"id": "vehicleHP",
"label": "vehicle HP"
},
{
"Type": "integer",
"id": "vehicleKW",
"label": "vehicle KW"
}
]
}
]
}
}
]
},
{
"conditions": []
}
]
options: {} // page options
});
</script>
</body>
</html>