Skip to main content

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 ].


Add the CalculateTotal Function
Figure 1 - Add the CalculteTotal function

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

Logic Category
Figure 2 - Logic category

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

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

if/do block
Figure 3 - if/do block

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

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

Creating the if/else Statement
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.


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

Logic Category
Figure 5 - Logic category

  1. Click, hold, and drag a [ Comparison block ] and connect with the [ if/do/else block ] in the if position.
Comparison Block
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


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

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

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

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

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


warning

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.



Current Form Equals Buys
Figure 7 - Current form equals Buys


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

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

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

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


Set Form Block
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.


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

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


Equation Block
Figure 9 - Equation block

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

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


Connecting Equation Blocks
Figure 10 - Connecting Equation blocks


warning

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


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

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


Form Block One
Figure 11 - Form block one

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

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


Form Block Two
Figure 12 - Form block two

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

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


Form Block Three
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.


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

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

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

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

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

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

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


if Statement
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


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

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

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

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


Set Form block
Figure 15 - Set Form block

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

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


Equation Block
Figure 16 - Equation block

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

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


Connecting Equation Blocks
Figure 17 - Connecting Equation blocks

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

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


Form Block One
Figure 18 - Form block one

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

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


Form Block Two
Figure 19 - Form block two

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

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


Form Block Three
Figure 20 - Form block three

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

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

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

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

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

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

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

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


do Statement
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


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

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

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

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

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


Return Statement
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.



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

Save the Form
Figure 23 - Save the CalculteTotal function


warning

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