Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Current »

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.

Basic Arithmetic

  • using data.key

  • unique keys

  • Addition vs string concatenation (using Number() to set default value to 0)

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:

var from = moment(data.start_date.slice(0,10), "YYYY-MM-DD");
var to = moment(data.end_date.slice(0,10), "YYYY-MM-DD");
value = parseInt(moment.duration(to.diff(from)).asDays());

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.

  • No labels