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 | Description |
form | form The complete form JSON object |
submission | The complete submission object. |
data | The complete submission data object. |
row | Contextual "row" data, used within DataGrid, EditGrid, and Container components |
rowIndex | The current row number |
component | The current component JSON |
instance | The current component instance. |
value | The current value of the component. |
moment | The moment.js library for date manipulation. |
_ | An instance of Lodash. |
utils | An instance of the FormioUtils object. |
TF_DATASOURCE(id) | Returns a promise containing all values from a data source |
TF_USER() | Returns the logged-in user object |
TF_TEAM_ID() | Returns the Id of the current team |
TF_RESPONSE_ID() | Returns the response Id of the current form |
Math Calculations
Subtraction
value = data.revenue - data.profit
Addition
value = data.revenue1 + data.revenue2 + data.revenue3
Percentage
value = data.total * 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: ${data.delivery.customer_name }
Customer Email: ${data.delivery.customer_email }
Delivery Address: ${ data.delivery.delivery_address }
`
In the expression above data.delivery refers to the SharePoint drop down menu. We user data.delivery.{columnName} to reference the specific field/column of that datasource.
Video Tutorial