Calculated Fields

Lets explore how you can use calculated fields to add intelligence to your forms

Updated over a week ago

Incorporating calculated fields into your forms can significantly enhance their intelligence and usability. This advanced feature uses JavaScript code to dynamically set the value of any field. This powerful language is not specific to Team Forms and so there is a wealth of online resources and tools (like chatGPT) to assist in crafting precise expressions. The beauty of this approach lies in its flexibility—there's virtually no cap on the complexity of calculations you can achieve.

You can make any components value calculated by setting the calculated value property in the data tab. Calculated fields use JavaScript code to access the response to other questions/components and apply some form of calculation. This could be as simple as basic math operations, appending some text or even as complex as applying business logic and making API calls. In this article we will explore some common examples of calculated fields.

JavasScript Variables

When writing your first calculated fields you will have access all the functionally of JavaScript as well as some special functions and variables provided my Team Forms. The table below outlines all the additional function provided, however the most important variable you need to know to get started is the data variable. This variable will provide you access to the response using the data.fieldName syntax.

Variable / Function



form The complete form JSON object


The complete submission object.


The complete submission data object.


Contextual "row" data, used within DataGrid, EditGrid, and Container components


The current row number


The current component JSON


The current component instance.


The current value of the component.


The moment.js library for date manipulation.


An instance of Lodash.


An instance of the FormioUtils object.


Returns a promise containing all values from a data source


Returns the logged-in user object


Returns the Id of the current team


Returns the response Id of the current form

Math Calculations


value = data.revenue - data.profit


value = data.revenue1 + data.revenue2 + data.revenue3


value = * 0.1

Table Totals

Table totals work the same as the math calculation above with the small difference of using the row variable to access fields from the current Data Grid row. For example below we calculate the total price per row using the code:

value = row.price * row.quantity

In addition to the row total we could also use calculated fields to calculate the grand total of the table with the help of the lodash.

value = _(data.order).sumBy('total')

In the expression above data.order is the name of the Data Grid used for the repeating table.

Displaying Additional Fields

Another common use of calculated fields is to display additional fields/columns based on the users selection in a SharePoint data source. When using SharePoint datasources, Team Forms will store all the fields/columns for that selection so you can easily access the additional fields.

value = `
Delivery Details:
Customer Name: ${ }
Customer Email: ${ }
Delivery Address: ${ }

In the expression above refers to the SharePoint drop down menu. We user{columnName} to reference the specific field/column of that datasource.

Video Tutorial

Did this answer your question?