customisedFieldsValue example 3
In this example if the value of the creationDate is lower from 05.17.2024 date then the value claimNumber should be 'claimNumber success from creationDate' and the appointmentDate should be empty. Otherwise claimNumber should be null and appointmentDate should be '05/16/2024'.
For changing the date value, it is important to keep the valid date (MM.dd.yyyy or MM/dd/yyyy)for date fields.
If needs to make empty the Date field, just in value param give the null value
[
{
"formName": "formName_01"
},
{
"groups": [
{
"groupName": "Informazioni Generali",
"tabName": "Dati pratica",
"tab": true,
"column": true,
"content": {
"rows": [
{
"name": "firstRow",
"column": true,
"fields": [
{
"Type": "date",
"id": "appointmentDate",
"label": "appointment Date"
},
{
"Type": "string",
"id": "claimNumber",
"label": "claimNumber"
},
{
"Type": "date",
"id": "creationDate",
"label": "Data creazione",
"visible": true,
"customisedFieldsValue": {
"condition": {
"value": "05/17/2024",
"operator": ">"
},
"then": [
{
"Type": "string",
"id": "claimNumber",
"value": "claimNumber success from creationDate"
},
{
"Type": "date",
"id": "appointmentDate",
"value": null
}
],
"else": [
{
"Type": "date",
"id": "appointmentDate",
"value": "05/16/2024"
},
{
"Type": "string",
"id": "claimNumber",
"value": ""
}
]
}
}
]
}
]
}
}
]
},
{
"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: 'date',
id: 'appointmentDate',
label: 'appointment Date'
},
{
Type: 'string',
id: 'claimNumber',
label: 'claimNumber'
},
{
Type: 'date',
id: 'creationDate',
label: 'Data creazione',
visible: true,
customisedFieldsValue: {
condition: {
value: '05.17.2024',
operator: '>'
},
then: [
{
Type: 'string',
id: 'claimNumber',
value: 'claimNumber success from creationDate'
},
{
Type: 'date',
id: 'appointmentDate',
value: null
}
],
else: [
{
Type: 'date',
id: 'appointmentDate',
value: '05/16/2024'
},
{
Type: 'string',
id: 'claimNumber',
value: ''
}
]
}
}
]
}
]
}
}
]
}
],
options: {} // page options
})
</script>
</body>
</html>