3 - Execute a Calculation
Last updated 14/12/2023
This documentation will explain how to add a calculation function and attach it to the On Enter event to execute client-side when entering a form field.When in Five's Code Editor you will be interacting with Five's API. In the
CalculateTotal()
function you will be using the following functions and properties:
- is a function used on the
Five
object to return the current action ID.
- is a property used on the
Five
object which gives the fields for the current form.
- is a function used on the
Five
object that returns a FiveError
indicating success.
Navigate to the Code Editor
1. Click Logic in the menu.2. Click Code Editor in the sub-menu.
Figure 1 - Code Editor menu item
Add the CalculateTotal Function
1. Click the Add New Code button.Figure 2 - Add New Code button
2. Type CalculateTotal in the Function ID field.
3. Click the lookup icon in the Language field and select TypeScript.
4. Click the OKAY button.
Figure 3 - Add the CalculateTotal function
5. Click the Copy button on the code block below.
CalculateTotal
function CalculateTotal(five: Five, context: any, result: FiveError) : FiveError {
if (five.actionID() === 'Buys') {
five.field.Total = five.field.Quantity * five.field.Price + five.field.Fees;
} else {
five.field.Total = five.field.Quantity * five.field.Price - five.field.Fees;
}
return five.success();
}
6. Paste the code block over the template in Five's Code Editor.
7. Click the Save Current Tab button.
Figure 4 - Save Current Tab button
tip
Five's Code Editor allows you to have multiple code blocks open, you can move between each code block by clicking the tabs at the top of the editor!
info
Once you have saved the CalculateTotal function, you can find the record in the Functions view! To navigate to the Functions view, click Logic in the menu
followed by clicking Functions in the sub-menu.
Figure 5 - Navigate to the Functions view
tip
You can also open the function again in the Code Editor by clicking the Open Existing Function button and selecting the function!
Figure 6 - Open existing function
Navigate to Forms
info
The CalculateTotal function needs to be attached to the Total field on the Buys and Sells forms. When executed, the function will calculate the total by
multiplying the values in the Quantity and Price fields and if on the Buys form add the fees, else subtract the fees if on the Sells form.
1. Click Visual in the menu.
2. Click Forms in the sub-menu.
Figure 7 - Forms menu item
Attach the CalculateTotal Function
Edit the Buys Form
Path: Buys form > General page > Total field > On Enter event1. Select the Buys record in the list.
2. Click the Pages tab.
Figure 8 - Pages tab
3. Select the General record.
Figure 9 - General record
4. Click the Fields tab.
Figure 10 - Fields tab
5. Select the Total record.
Figure 11 - Total record
6. Click the Events tab.
Figure 12 - Events tab
7. Either click the Edit button in the form app bar, or click directly in the On Enter field.
8. Click the lookup icon in the On Enter field and select CalculateTotal.
Figure 13 - On Enter field
9. Click the Save button in the form app bar.
Figure 14 - Save button
10. Click the Save button in the form app bar above the list.
Figure 15 - Save button
Edit the Sells Form
Path: Sells form > General page > Total field > On Enter event1. Select the Sells record in the list and repeat the above steps.
Figure 16 - On Enter field
Run the Portfolio Application
tip
This is a good time to run the Portfolio application to see how the CalculateTotal function works!
1. Click the Run button.
Figure 17 - Run button
2. Select the Growth Portfolio record in the list.
3. Click the Down button in the form app bar.
Figure 18 - Down button
Test the Buys Form
1. Click the Add Item button.2. Click the lookup icon in the Stock field and select AMP.
3. Click the calendar icon in the Transaction Date field, select the current date and click the OK button.
4. Type 5000 in the Quantity field.
5. Type 1.20 in the Price field.
6. Type 10.00 in the Fees field, press tab.
info
The Total field now automatically calculates on entering the field.
Figure 19 - Add an AMP buy record
7. Click the Save button in the form app bar.
Figure 20 - Save button
Test the Sells Form
1. Select Sells in the menu.2. Click the Add Item button.
3. Click the lookup icon in the Stock field.
Problem
Currently, all the stocks are listed in the Stock lookup list, we need to make it that only the stocks we own are listed. We can fix this in Five by creating a query with metadata
and attaching it to the Stock field to know what we currently own.
info
The Allocations page is on the same page as the Sells form as we set the navigation to continuous.
Figure 21 - Sells form
4. Click the Cancel button in the form app bar.
Figure 22 - Cancel button
5. Close the browser tab and return to Five.
Navigate to Tables
note
We'll import the Buy.csv file so that we have more data to work with.
1. Click Data in the menu.
2. Click Tables in the sub-menu.
Figure 23 - Tables menu item
Import the Buy.csv File
1. Click here to download the Buy.csv file.2. Click the Import CSV into Table button.
Figure 24 - Import CSV into Table button
3. Click the lookup icon in the table field and select Buy.
4. Click the Choose File button.
5. Navigate your files, select, and open Buy.csv
Figure 25 - Import Buy.csv
6. Click the Save button in the form app bar.
Figure 26 - Save button
7. Click the OK button on successful import.
Figure 27 - Ok button