Skip to main content

Add calculated fields to a form

When you create forms using Form builder, you can use fields to display information based on responses on other fields. Such fields are called calculated fields.

For instance, you can calculate the BMI of a patient if you know the patient's height, weight, and gender.

Zenoti lets you write the logic to calculate the value for a field using JavaScript in the field's properties.

To see calculated fields in action, go to the Fitzpatrick skin score form. The Score and Fitzpatrick skin type fields are both calculated fields.

  1. Create a form or open an existing form.

  2. From the components list, add a component that you want to display as a calculated field.

    Note

    Fields such as Text field or Number field are usually used to build calculated fields.

  3. To display the field as a calculated field, place your mouse pointer on the field and click Edit.

    1. To ensure that users do not change the calculated value by mistake, under the Basic tab, select the Disabled check box.

      It is important to make the calculated field uneditable because the field only has to display a logically calculated value by analyzing the entries on other fields.

    2. Go to the Data tab and expand the Calculated value section.

    3. Scroll down to and expand the JavaScript section.

    4. To add the logic for your calculated field, in the JavaScript section, enter a custom JavaScript code.

      For writing the JavaScript logic, you must know the Field key displayed under the Basic tab and the response values of the required components.

      The required components are:

      • The component you choose to build the calculated field.

      • The components whose value is required to write the logic.

      option_value.png

    5. Click Save.

Examples

Scenario

Perform these steps

You want to display the BMI (Body Mass Index) of a user when they enter their height and weight in the form.

While creating the form, perform these steps:

  1. Add two Number components to the form and label them as Height and Weight.

    Note the field keys of both components displayed under the Basic tab. Say number1 and number2.

  2. Add a third Number component and label it as BMI. Consider the field key for this component is number3.

  3. To disable the BMI component from taking entries from the user, under the Basic tab, select the Disabled check box.

  4. The formula for calculating the BMI of a person is weight (in kg) /height (in m)² (weight divided by the square of height).

    The JavaScript for the same is value = data.number1 / data.number2 ** 2.

    For the BMI component, under the Data tab, in the Calculated value > JavaScript field, enter the same script.

Result: When a user enters their height and weight into the respective fields, the BMI field automatically displays their Body Mass Index by using the code that you entered while configuring the component.

You want to display the skin score of a user by analyzing their responses in the other fields.

While creating the form, perform these steps:

  1. Add Radio components to the form to capture skin details like exposure to sun and tan range.

    The field keys for radio components range from radio to radio9.

  2. Add a Number component and label it as Score.

    The field key for this component is number.

  3. To disable the Score component from taking entries from the user, under the Basic tab, select the Disabled check box.

  4. For calculating the skin score based on the responses to the radio components, use the following JavaScript.

    var custratotal = +data.radio + +data.radio1 + +data.radio2+ + +data.radio3 + +data.radio4 + +data.radio5 + +data.radio6 + +data.radio7 + +data.radio8 + +data.radio9; value = custratotal;

  5. For the Score component, under the Data tab, in the Calculated value > JavaScript field, enter the same script.

Result: When a user enters responses into the radio components, the Score field automatically displays the skin score of the user by using the code that you entered while configuring the component.

You want to display the skin type of a user by analyzing their skin score.

While creating the form, perform these steps:

  1. Add a Text field component and label it as Fitzpatrick skin type.

    The field key for this component is textField1.

  2. To disable the Fitzpatrick skin type component from taking entries from the user, under the Basic tab, select the Disabled check box.

  3. For calculating the skin type based on the skin score displayed in the Score component, use the following JavaScript.

    var custratotalTemp = +data.number; var temp = ''; if(custratotalTemp>=0 && custratotalTemp<=7){ temp = 'I'; } else if(custratotalTemp>=8 && custratotalTemp<=16){ temp = 'II'; } else if(custratotalTemp>=17 && custratotalTemp<=25){ temp = 'III'; } else if(custratotalTemp>=26 && custratotalTemp<=30){ temp = 'IV'; } else if(custratotalTemp>30){ temp = 'V & VI'; } value = temp;

  4. For the Fitzpatrick skin type component, under the Data tab, in the Calculated value > JavaScript field, enter the same script.

Result: As soon as the Score field displays a score for the user's skin, the Fitzpatrick skin type field automatically displays the skin type of the user by using the code that you entered while configuring the component.

In this section: