Value

Value

We can define a default value for a property. This value will be used everytime the field will be shown. So the user cannot change the value of the field, it always will be overwritten by the value property.

{
  "component": "text",
  "label": "Name",
  "value": "John"
}

warning

All what"s passed to the value property is directly set to the input.

{
  "name_of_the_customer": {
    "component": "text",
    "label": "Name",
    "value": {
      "from": "api_response.policy_holder.full_name"
    }
  }
}

The data will be

{
  name_of_the_customer: {
    from: {
      ("api_response.policy_holder.full_name");
    }
  }
}

Because the main purpose of hardcoding value, is to set all what"s passed in the value attribute, we can define an object to an input.

ValueFrom

For specific cases, we can define a value coming from a specific property. We can define it by setting the valueFrom property to the field.

ValueFrom as a string

If the valueFrom value is a string, it is considered to the path where to find the value to set to the field to.

{
  "name_of_the_customer": {
    "label": "Name of the customer",
    "component": "text",
    "valueFrom": "api_response.policy_holder.full_name"
  }
}

In this example, the data behind api_response.policy_holder.full_name will be set to name_of_the_customer

ValueFrom as an object

It accepts an object with the following property: date. The object passed to the date property can allow the user to define a date in the future or in the past. Here is an example :

{
  "today": {
    "label": "Value is today",
    "component": "date",
    "valueFrom": {
      "date": {
        "when": "now"
      }
    }
  }
}

The object can take other properties : when, operation, amount, kind. The operation only accepts add or substract. The amount is the number of days, months or years to add or substract. The kind is the unit of the amount, it can be days, months or years. Behind the scene it uses the momentjs library.

"value_from_yesterday": {
  "label": "Value is yesterday",
  "component": "date",
  "valueFrom": {
    "date": {
      "when": "now",
      "operation": "subtract",
      "amount": "1",
      "kind": "days"
    }
  }
}

Storybook example

Value From#

Value & visibility

By default when a field become not visible, it clears his value.

danger

Important note the value is cleared only if the field visibility change on the current form shown to the user, if the field is on another screen form, it become invisible but his value is still there. In fact that's an front action, it's when the field become not visible that it clears his value so if the field is not on the current form it cannot clears his value.

There is a way to force the field to not clear his value, sometimes a field that become not visible must keep his value.

We can do it by setting the property clearOnHidden: true to force to empty the value on hidden, mostly usefull for table or section

Storybook example

Clear value if not visible#

Keep value if not visible#