Building Functions with Low-Code

Last Updated 3/03/2022

Create a Function Using Five's Low-Code Editor

Five's Low-Code Editor is designed for someone who has little or no-coding experience as once you have connected the blocks together, Five will generate the syntactically correct JavaScript from the blocks. Your application can then use this code to add functionality such as performing calculations or verifying correct data. You drag the blocks from the library onto the editor and connect these together.

Below is a short video to demonstarte how to use Five's Low-Code editor before you begin to use it.

Build a Function

Requirement

The Developer or Control role is required to create, read, update, and delete a function.

The CalculateTotal function has been coded so that if attached to the Buys form it will multiply the Quantity and Price fields together and then add the value in the Fees field. This same function will also be attached to the Sells form where it will execute the same equation, however, it will minus the value in the Fees field.

1. Select [ Functions ] in the [ menu ].

2. Click the [ Add Item button ] in the [ list app bar ].

3. Type " CalculateTotal " in the [ Function ID field ].

4. Click the [ lookup icon ] in the [ Language field ] and select " Low-code ".

5. Click in the [ Code field ] to open Five's [ Low-Code editor ].

Figure 1 - Add the CalculteTotal function

6. Select [ Logic ] in the [ toolbar ].

Figure 2 - Logic category

7. Click, hold, and drag the [ if/do block ] into the [ workspace ].

8. Click the [ cog ] in the [ if/do block ].

Figure 3 - if/do block

9. Click, hold, and drag the [ else block ] and connect with the [ if block ] in the [ popup window ].

10. Click the [ cog ] to remove the [ popup window ].

Figure 4 - Creating the else/if statement

info

else if blocks are conditional statements that are commands for handling decisions and returning a boolean value.

• The if statement specifies a block of code to be executed if a condition is true.
  
• The else statement specifies a block of code to be executed if the condition is false.
  
• The else if statement specifies a new condition if the first condition is false.

11. Select [ Logic ] in the [ toolbar ].

Figure 5 - Logic category

12. Click, hold, and drag a [ Comparison block ] and connect with the [ if/do/else block ] in the if position.

Figure 6 - Comparison block

info

Comparison Operators

A comparison block takes two inputs and compares them. There are six comparison blocks.

= equals
≠ not equals
< less than
≤ less than and equals to
> greater than
≥ greater than and equals to

13. Select [ Five ] in the [ toolbar ].

14. Click, hold, and drag the [ Current Form block ] and connect in the first input position of the [ Comparison block ].

15. Select [ Values ] in the [ toolbar ].

16. Click, hold, and drag the [ Quote block ] and connect in the second input positon of the [ Comparison block ].

17. Type " Buys " in the [ Quote block ].

danger

When typing values in such as Buys, it needs to exactly the same as the ID you are referencing otherwise your function will not work. It is case sensitive.

Figure 7 - Current form equals Buys

18. Select [ Five ] in the [ toolbar ].

19. Click, hold, and drag the [ Set Form block ] and connect with the [ if/do/else block ] in the do position.

20. Click the [ lookup icon ] in the first [ field ] and select " Buys ".

21. Click the [ lookup icon ] in the second [ field ] and select " Total ".

Figure 8 - Set Form block

info

The Set Form block allows you to select the field on the form that will hold the returned value if the condition is true. The block has two lookup lists, the first lookup list will hold all the forms in your application and the second lookup list will hold all the fields for the selected form.

22. Select [ Math ] in the [ toolbar ].

23. Click, hold, and drag the [ Equation block ] and connect with the [ Set Form block ].

Figure 9 - Equation block

24. Select [ Math ] in the [ toolbar ].

25. Click, hold, and drag the [ Equation block ] and connect in the first input position in the [ Equation block ].

Figure 10 - Connecting Equation blocks

danger

Ensure the second equation block is in the first input position for Five to correctly apply Parentheses.

26. Select [ Five ] in the [ toolbar ].

27. Click, hold, and drag the [ Form block ] to the first input position in the [ Equation block ].

Figure 11 - Form block one

28. Select [ Five ] in the [ toolbar ].

29. Click, hold, and drag the [ Form block ] to the second input position in the [ Equation block ].

Figure 12 - Form block two

30. Select [ Five ] in the [ toolbar ].

31. Click, hold, and drag the [ Form block ] to the third input position in the [ Equation block ].

Figure 13 - Form block three

info

The Form block allows you to select the fields on the current form that hold the values needed to perform the calculation.

32. Click the [ lookup icon ] in the first [ field ] on the first [ Form block ] and select " Buys ".

33. Click the [ lookup icon ] in the second [ field ] on the first [ Form block ] and select " Quantity ".

34. Click the [ lookup icon ] in the [ Operator field ] and select the " multiplication operator " x.

35. Click the [ lookup icon ] in the first [ field ] on the second [ Form block ] and select " Buys ".

36. Click the [ lookup icon ] in the second [ field ] on the second [ Form block ] and select " Price ".

37. Click the [ lookup icon ] in the first [ field ] on the third [ Form block ] and select " Buys ".

38. Click the [ lookup icon ] in the second [ field ] on the third [ Form block ] and select " Fees ".

Figure 14 - if statement

info

So far the statement is stating if the current form equals Buys perform the following:

Quantity * Price + Fees and enter the value in the Total field on the Buys form

39. Select [ Five ] in the [ toolbar ].

40. Click, hold, and drag the [ Set Form block ] and connect with the [ if/do/else block ] in the else position.

41. Click the [ lookup icon ] in the first [ field ] and select " Sells ".

42. Click the [ lookup icon ] in the second [ field ] and select " Total ".

Figure 15 - Set Form block

43. Select [ Math ] in the [ toolbar ].

44. Click, hold, and drag the [ Equation block ] and connect with the [ Set Form block ].

Figure 16 - Equation block

45. Select [ Math ] in the [ toolbar ].

46. Click, hold, and drag the [ Equation block ] and connect in the first input position in the [ Equation block ].

Figure 17 - Connecting Equation blocks

47. Select [ Five ] in the [ toolbar ].

48. Click, hold, and drag the [ Form block ] to the first input position in the [ Equation block ].

Figure 18 - Form block one

49. Select [ Five ] in the [ toolbar ].

50. Click, hold, and drag the [ Form block ] to the second input position in the [ Equation block ].

Figure 19 - Form block two

51. Select [ Five ] in the [ toolbar ].

52. Click, hold, and drag the [ Form block ] to the third input position in the [ Equation block ].

Figure 20 - Form block three

53. Click the [ lookup icon ] in the first [ field ] on the first [ Form block ] and select " Sells ".

54. Click the [ lookup icon ] in the second [ field ] on the first [ Form block ] and select " Quantity ".

55. Click the [ lookup icon ] in the [ Operator field ] and select the " multiplication operator " x.

56. Click the [ lookup icon ] in the first [ field ] on the second [ Form block ] and select " Sells ".

57. Click the [ lookup icon ] in the second [ field ] on the second [ Form block ] and select " Price ".

58. Click the [ lookup icon ] in the [ Operator field ] and select the " subtraction operator " -.

59. Click the [ lookup icon ] in the first [ field ] on the third [ Form block ] and select " Sells ".

60. Click the [ lookup icon ] in the second [ field ] on the third [ Form block ] and select " Fees  ".

Figure 21 - else if statement

info

The statement is now stating, if the current form equals Buys perform the following:

Quantity * Price + Fees and enter the value in the Total field on the Buys form

else, if we are on the Sells form perform the following:

Quantity * Price - Fees and enter the value in the Total field on the Sells form

61. Select [ Five ] in the [ toolbar ].

62. Click, hold, and drag the [ Return block ] and connect with the [ if/do/else block ].

63. Select [ Values ] in the [ toolbar ].

64. Click, hold, and drag the [ Quote block ] and connect with the [ Return block ].

65. Click the [ Save button ] in the [ Low-Code editor app bar ].

Figure 22 - Return statement

info

When interacting with Five's API a certain format is expected, Five needs to know if the function is successful when called to continue with the processing or know to terminate. A message can be added by typing in the Quote block. You can leave the message blank.

66. Click the [ Save button ] in the [ form app bar ].

Figure 23 - Save the CalculteTotal function

danger

If you click the Convert to JavaScript button, you cannot come back to the Low-code Editor side without breaking your blocks.