Skip to main content

OnValueChange

We can define actions that will be executed when the user changes the value of an input. The name of the attribute reflects well what it"s suppoed to do "when the value change do this".

Simple onValueChange set​

In the following example, we say : When the checkbox changes its value set true to the linked_checkbox

"checkbox": {
  "component": "checkbox",
  "label": "Checkbox with on value change",
  "onValueChange": {
    "set": {
      "to": "linked_checkbox",
      "value": true,
    }
  }
}

Condition on a onValueChange​

We can add condition on a onValueChange set, the condition (or conditons if it is an array) are defined here

tip

IMPORTANT that here, the property automatically inherit of the property from the current component that is changing, so the property value is the new value of the component.

When the checkbox changes its value set true to the linked_checkbox but only when the new value of the checkbox is true

"checkbox": {
  "component": "checkbox",
  "label": "Checkbox with on value change",
  "onValueChange": {
    "set": {
      "to": "linked_checkbox",
      "value": true,
      "condition": {
        "assertion": "isTrue"
      }
    }
  }
}

Condition based on another property​

But if we need to conditionnaly set another value based on another data than the current value, we can do this by overriding the property and define the property from.

"domain_id": {
    "component": "select",
    "label": "t:domain",
    "placeholder": "t:domain_selection",
    "default": {
      "from": "activity_data.default_domain"
    },
    "inline": true,
    "sort": "asc",
    "list": {
      "from": "domains"
    },
    "validations": [
      "required"
    ],
    "tooltip": "t:domain_list_tooltipsssss",
    "onValueChange": {
      "set": [
        {
          "to": "tarif_key",
          "value": null,
          "condition": [
            {
              "property": {
                "from": "domain_id"
              },
              "assertion": "notEqual",
              "value": {
                "from": "domain_id"
              }
            }
          ]
        }
      ]
    }
  }

Multiple onValueChange​

We can define an array in a onValueChange set if we need to act on multiple data when changing the current field :

"checkbox": {
  "component": "checkbox",
  "label": "Checkbox with on value change",
  "onValueChange": {
    "set": [
      {
        "to": "first_linked_checkbox",
        "value": true,
        "clearOnConditionUnfilled": true,
        "condition": {
          "assertion": "isTrue"
        }
      },
      {
        "to": "second_linked_checkbox",
        "value": true,
        "clearOnConditionUnfilled": true,
        "condition": {
          "assertion": "isTrue"
        }
      }
    ]
  }
}

onValueChange on all iterations of an array​

We can define to set a value to each pointed field of an array :

"global_discount": {
  "component": "text",
  "symbol": "%",
  "type": "number",
  "label": "Discount",
  "onValueChange": {
    "set": [
      {
        "to": "cars_multi[].discount",
        "condition": [
          {
            "property": {
              "from": "edit_discount_globally"
            },
            "assertion": "isTrue"
          }
        ]
      }
    ]
  }
}

For example, if we have :

cars_multi = [
  {
    discount: 12,
  },
  {
    discount: 13,
  },
  {
    discount: 14,
  },
];

the onValueChange defined on the global_discount field will be applied to each iterations of the cars_multi

Storybook example​

Simple OnValueChange#

Simple OnValueChange Clear On Condition Unfilled#

OnValueChange On Multiple Iteration#

OnValueChange With Multiple Conditions#

Dependant OnValueChange#