3 - Execute a Calculation

Last updated 29/03/2023

This documentation will explain how to add a calculation function and attach it to the OnEnter 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:

five.getActionID() - The getActionID() is a function used on the Five object to return the current action ID.

five.field.<fieldID> - The five.field property gives the fields for the current form.

five.success() - The success() is a function used on the Five object that returns a FiveError indicating success.

If you have no coding experience, you may like to look at how to write the CalculateTotal function using Five's Low-Code Editor.

Navigate to the Code Editor

1. Select Logic in the menu.

2. Select 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 - Function Details window

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 the CalculateTotal function

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.

Attach the CalculateTotal Function to the On Enter Event on the Buys Form

Path: Buys form > General page > Total field > On Enter event

1. Select Visual in the menu.

2. Select Forms in the menu.

Figure 5 - Forms menu item

3. Select the Buys record in the list.

4. Click the Pages tab.

Figure 6 - Pages tab

5. Select the General record.

Figure 7 - General record

6. Click the Fields tab.

Figure 8 - Fields tab

7. Select the Total record.

Figure 9 - Total record

8. Click the Events tab.

Figure 10 - Events tab

9. Click the lookup icon in the On Enter field and select CalculateTotal.

Figure 11 - Attach the CalculateTotal function

10. Click the Save button in the form app bar.

Figure 12 - Save the CalculateTotal event

11. Click the Save button in the form app bar above the list.

Figure 13 - Save the Buys form

Attach the CalculateTotal Function to the On Enter Event on the Sells Form

The CalculateTotal function will also need to be attached to the Total field on the Sells form. Repeat the steps above for the Sells form.

Path: Sells form > General page > Total field > On Enter event

Figure 14 - Attach the CalculateTotal function to the Sells form

Run the Portfolio Application

This documentation is to demonstrate how the On Enter event works in the Portfolio application.

1. Click the Run button in Five's toolbar.

Figure 15 - Run button

2. Select the Growth Portfolio record in the list.

3. Click the Down button in the form app bar.

Figure 16 - Down button

Test the Buys Form

info

As the Portfolios menu was set as the parent for the Buys and Sells menus, you will only see the data related to the selected Portfolio record when drilling down.

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 and select the current date, 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 17 - Add an AMP buy record

7. Click the Save button in the form app bar.

Figure 18 - Save the AMP buy record

info

To have some test data to work with, add the following buy records.

8. Repeat the above steps to add the following Buy records.

Stock	TransactionDate	Quantity	Price	Fees	Total
BOQ	current date	300	.80	12.00	Auto-calculates
AEI	current date	120	.50	10.00	Auto-calculates
AEI	yesterday date	1000	.70	15.00	Auto-calculates
BHP	current date	250	1.20	10.00	Auto-calculates

info

Your Buys record list should look similar to below.

Figure 19 - Buys record list

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.

Figure 20 - Sells form

4. Click the Add Allocations button.

Figure 21 - Add Allocations button

info

This is the Allocations page on the Sells form in a continuous page navigation form.

Figure 22 - Allocations page

5. Click the Cancel button in the form app bar.

Figure 23 - Cancel button

6. Close the browser tab and return to Five.