Calculated Fields

The functionality of your form can be significantly increased by using Javascript to create custom logic “under the hood.” For use cases where you would like to sum the values of user input or calculate percentages, this document highlights the steps you can take for your particular use case.

Note that CHEFS uses the form.io drag and drop form builder that has components such as ‘Text Field’ and ‘Number’ components which are included within both ‘Basic’ and ‘Advanced’ fields. The basic components offer limited functionality so ensure that you are using the advanced options for the calculations documented below.

Open

Basic Arithmetic

Using the ‘Number’ component from the ‘Advanced Fields,’ simple calculations can be carried out based on user input. Each component in the form uses a unique key which can be edited by clicking on the settings (gear) icon > API > Property Name.

Open

A component is accessed in another field using the data keyword and the components calculated value is set using the value variable under Settings > Data > Calculated Value.

For example, if you wanted to add the input from two fields whose unique keys were num1 and num2, this can be achieved using the following code:

Similarly, basic arithmetic operations can be carried out to subtract, multiply, or divide:

Note: If you are calculating a value based on the input from more than two fields, cast the data variables to a Number() so that the default value is set to 0, otherwise the calculated field will concatenate the values, for example, the result of 1 + 1 will be displayed at 11.

Date/Time Calculations

CHEFS can also be used for date/time calculations using the Moment.js library. Moment is a widely popular Javascript library designed to make date/time manipulations easier. In the following example, it is used to calculate the number of days between two dates.

To build the example form shown in the image, start by adding two ‘Date/Time’ components in the form builder along with a ‘Number’ component from the ‘Advanced Fields.' Each form component uses a unique key so that its data is accessible from other components.

Next, change the keys of the ‘Date/Time’ components if you do not wish to use the default keys. This can be done by clicking on the settings (gear) icon of the component > API tab > and entering your key. In this example, the keys start_date and end_date are used.

Now, these values are accessible from any other component within the form using the data keyword, for example, when a user inputs a start date, the variable would be accessible by using data.start_date.

Finally, the number component needs to be edited so that it displays the number of days between the two dates. Start by hovering over the ‘Number’ component and clicking on the gear icon > Data > scrolling down to the ‘Calculated Value’ section.

Open the tab by clicking the '+' icon and enter the following code in the Javascript field as shown in the following image:

The data.start_date and data.end_date variables return a date/time object as a string but also include additional time information. Since we only care about the date, slice() is used to obtain the characters in the format YYYY-MM-DD by slicing the first 10 characters. The variables from and to are set as moment objects based on the user input and the moment.duration() method returns the time difference in milliseconds, converted into days by using asDays().

Click ‘Save’ to complete the process and preview your form to ensure that the calculation works as expected. Note that there are other approaches to calculate the number of days but this was found to be the easiest for this use case.