A find fact form often has a list of values (e.g. household expenses) and a dynamic subtotal field that shows a new sum whenever an input changes. This guide shows you how to configure a component so that it dynamically displays the sum of values in a given set of fields.
Contents
Prerequisites
Know how to create and edit a fact find template.
Setting up the fields
Open a fact find template page. Locate (or place) a series of Number components on a template page. In the screenshot below, we placed six Number components inside a Field Set component. The aim is to automatically calculate a subtotal for the values in the owner occupied living expense fields.
Locating unique identifiers
The first step is to find a unique identifier for each Number component that will hold a value. To that end, we use the API property name.
To complete this task, open Notepad (or a similar app). You'll need to copy and paste several names.
On the template canvas, hover over the first Number component (e.g. Utilities) and click the Edit icon.
Click the API tab, copy the Property Name, and paste it into a Notepad file.
Repeat the steps for each Number component.
Configuring the subtotal component
Locate the Number component that will display the sum. In this example, that component is called Subtotal. Hover the mouse on the component and click the Edit icon. Make sure the Display tab is selected. Scroll down and check the box next to Disabled.
Select the Data tab. Scroll down the page and click the Calculated Value box. The folder expands.
Copy the code below and paste it into the JavaScript field. Replace the word utilities (i.e. utilities, utilities1, etc.) with your own API property names (the ones you saved in a Notepad file).
value = (data.utilities || 0) +
(data.utilities1 || 0) +
(data.utilities4 || 0) +
(data.utilities3 || 0) +
(data.utilities2 || 0);
Click Save and then Save again on the template page. Click Preview to test the calculation.
In Preview mode, the subtotal field displays the correct value even if some fields are blank.
