You can now create tables in XForms that include columns that derive their value automatically from a calculation based on other numeric columns from the same rows. This feature is available as of v0.8.4 of the XForms Mobile application, and is also integrated into the Cx mobile application (v0.7.9+).
Calculated columns, explained visually
This is easier to understand by looking at the example below. In this example, we created a simple invoice, where there’s some basic customer information at the top, followed by a table that displays items purchased by that customer. In the items purchased table, you can see that [Price x Quantity] = Subtotal, and [Price x Quantity] – Discount = Total.
Optional footer control
There’s also an optional footer which can take either a text value (like in the example below you see “Grand Total” at the bottom of the “Discount” column) or the SUM of all the rows in a numeric column (like at the bottom of the “Total” column to the far right).
How to design this in the Form Designer
This feature is actually very easy to use. Take a look at the form designer screenshot below. Once you create your table, click on the “+ Add Column” button. Then select “Calculated” from the Column Type dropdown at the top of the screen. From there, fill in the needed info. Some notes:
- You can format the column as currency (e.g., $#.##) or not, and assign as many or as few decimal places as you’d like.
- You can specify a formula for the column, but you have to use other numeric columns in your expression
- You can specify to display text or display the SUM total in the optional footer.
Here’s an animated gif illustrating the Form Designer in action. Notice that there are some tooltips for each of the respective options.
Does this work on phones (and not just tablets)?
You bet. Anything you build in XForms works on tablets, phones (iOS and Android), and web browsers. Take a look at the animation below of what this invoice form looks like on an iPhone Xr.