CustomisedFieldsValue

The customisedFieldsValue object is structured as follows:

1. condition

This property requires two parameters to be defined:

  • value: This should be of the same data type as the current field being evaluated.
  • operator: This can be one of the following comparison operators: ===, !==, >, <, >=, or <=.

2. then

This property specifies the fields that should be updated or changed if the condition evaluates to true.

3. else

This property specifies the fields that should be updated or changed if the condition evaluates to false.

Both the then and else properties follow the same structure, which consists of an array of objects. Each object should have the following properties:

{
  "Type": "date",        // The type of field that should change
  "id": "creationDate",  // The unique identifier for the field to be changed
  "value": "05/01/2024"  // The new value to be assigned to the field
}

customisedFieldsValue example 1

This is the examples of the customiseFields in config in case the field has the value true, the field with id 'collaborator_name' should update its value to "col-nam checkbox true" in case the field does not have the value true (for this case false should be), the field with id 'collaborator_name' should update its value to col-nam checkbox false

[ { "formName": "formName_01" }, { "groups": [ { "groupName": "Informazioni Generali", "tabName": "Dati pratica", "tab": true, "column": true, "content": { "rows": [ { "name": "firstRow", "column": true, "fields": [ { "Type": "checkbox", "id": "checkbox_test", "label": "test checkbox", "visible": true, "readOnly": false, "customisedFieldsValue": { "condition": { "value": true, "operator": "===" }, "then": [ { "Type": "string", "id": "collaborator_name", "value": "collaborator_name changed from true" } ], "else": [ { "Type": "string", "id": "collaborator_name", "value": "collaborator_name changed from false" } ] } }, { "Type": "string", "id": "collaborator_name", "label": "collaborator name" } ] } ] } } ] }, { "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: 'checkbox',
                          id: 'checkbox_test',
                          label: 'test test test bla bla',
                          visible: true,
                          readOnly: false,
                          customisedFieldsValue: {
                            condition: {
                              value: true,
                              operator: '==='
                            },
                            then: [
                              {
                                Type: 'string',
                                id: 'collaborator_name',
                                value: 'col-nam checkbox true'
                              }
                            ],
                            else: [
                              {
                                Type: 'string',
                                id: 'collaborator_name',
                                value: 'col-nam checkbox false'
                              }
                            ]
                          }
                        },
                        {
                          Type: 'string',
                          id: 'collaborator_name',
                          label: 'collaborator name'
                        }
                      ]
                    }
                  ]
                }
              }
            ]
          }
        ],
        options: {} // page options
      })
    </script>
  </body>
</html>