Skip to main content

Calculate form component values

Calculated values are field inputs determined based on the values of other form components.

Here's an example scenario used in the tutorial:

  • You have three Text Field components: the first component requires users to input their first name, the second component requires their last name, and the third component requires their full name.

  • If the user provides input for the first name and last name Text Fields, then the full name Text Field automatically populates, by concatenating first name and last name.

    docs image

Steps​

  1. Open the form that you are working in.
  2. Add three Text Field components. Remember the Property Names for them, because you will use them to configure the calculated value.
  3. Hover over the third Text Field component and click Edit JSON docs image.
  4. In the Component JSON tab, add the following JavaScript snippet inside the curly brackets and set it to the value variable: 
    "calculateValue": "value=data.firstName + ' ' + data.lastName"

For this example, a blank space ' ' is also added between the firstName and lastName property names, to display the full name accordingly.

The Component JSON tab looks like this:

docs image

For this example, a blank space ' ' is also added between the firstName and lastName field keys, to display the full name accordingly.

note
  • Value - holds the value of the component that you want to be calculated. For this example, it holds the value for the third Text Field component, named Full Name.
  • data - helps you access the value of a certain component.