Welcome to Five Labs, a step-by-step guide to building applications using Five.
This lab will guide you on how to calculate the values in your fields and display the result in your interface using Five. The objective of the tutorial is to learn:
How to create a process in Five
Write and manage JavaScript / TypeScript
Calculating Field Values
Lab Objectives
By the end of this lab, you will learn how to set up a process in Five, add values from two fields, and show the result on the screen.
To get started, here’s what we need:
- Have Five installed in your system or run Five on the cloud (with a paid subscription).
Step 1: Creating An App in Five
First, let’s launch Five and click the yellow + button to create a new application. Assign it a name and press save. Then, select Manage to begin developing your application.
Step 2: Creating A Process
First, we need to add 3 fields to our app. We'll input values into the first two fields, and the third will display the result.
We will achieve this by creating a simple process, begin by navigating to Processes: click on ‘Tasks’, and then on ‘Processes’
Create a new process by clicking on the yellow ‘+’ button and giving it a name ( we will call it CalculateRecords)
Next, navigate to the 'Screen Fields' tab. Here, you can introduce fields to our process.
Click the '+' button in the top right corner to add three fields. Name the first two 'Field 1' and 'Field 2', both with an integer display type.
The third field should be named 'Result', also with an integer display type.
Step 3: Writing JavaScript Function
Next, we will write the logic that does the calculation using JavaScript, in Five we can write our own code through the Code editor.
To access it, click on Manage, then on Logic, and then Code Editor.
Now click on the Plus icon. Choose a name for your function, as well as the language you’d like to use: JavaScript or TypeScript.
You now can write functions using standard JavaScript or TypeScript. In this guide, we'll craft a straightforward logic to compute values from the two fields and display the outcome in a third 'Result' field.
function CalculateFields(five, context, result) {
const a = five.field.Field1;
const b = five.field.Field2;
five.field.Result = a + b;
return five.success(result);
}
We retrieve the values from our fields using five.field, assigning them to variables a and b. We then set the 'Result' field to the sum of a and b.
Next, let's attach our function to our fields such that whenever we alter the values of the fields, our function is called and updates the result.
Start by navigating back to ‘Processes’ inside the ‘Task’ menu, select the process that we created earlier, and then click on the events tab which will show all the events that a process goes through.
Click on 'Screen Fields', choose 'Field1', then navigate to the events section and select 'CalculateFields' for the 'OnValidate' event.
Next, repeat the process for 'Field2'. This ensures the function is triggered whenever the value of either field is modified.
Conclusion
Now let’s finally put our process into a menu so that we can access it in our end-user application.
Navigate to ‘Visual‘ and then click on ‘Menu‘, we will create a new menu item, and then in the ‘Action‘ field we will select our process
Now, to test our work, launch the application by clicking the play ▶️ button located in the top right corner, as shown below.
This will run our application in a separate window, which should look something similar to the app below:
After modifying the value in either 'Field 1' or 'Field 2', the calculation will instantly take place, and the result will be displayed in the 'Result' field.
Well done! You've successfully implemented the calculate fields feature.