Action Buttons

Last updated 26/03/2024

When you add a process, by default it will have no action buttons. You can add the following buttons to a process:

• Five's Cancel button
• Five's Run button
• Your own custom action button

Add Five's Cancel Button

By default, if there is no function attached to the On Cancel event, there will be no Cancel button on your process. If a function is attached to the On Cancel event, a Cancel button will be added to your process.

A function just using Five's default template supplied in the Code Editor will add a Cancel button on your process.

1. Navigate to the Functions view by selecting Logic in the menu and Functions in the sub-menu.

Figure 1 - Functions menu item

2. Click the Add Item button, give your function an ID, and click in the Code field to open the Code Editor.

Figure 2 - Add function

info

Five has added the basic function template and this is all you need to add a Cancel button to your process. All this will do is clear the values in the screen fields.

3. Click the Save button in the Code Editor app bar.

Figure 3 - Save button

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

Figure 4 - Save button

5. Navigate to the Processes view by selecting Tasks in the menu and Processes in the sub-menu.

Figure 5 - Processes menu item

6. Select your process record in the list and click the Events tab.

Figure 6 - Events tab

7. Click the lookup icon in the On Cancel field and select your function.

Figure 7 - On Cancel event

8. Click the Save button.

Figure 8 - Save button

A Cancel button will be added to your process.

Figure 9 - Cancel button

Data can be entered into the screen fields.

Figure 10 - Screen fields

When the Cancel button is clicked, all the fields will be cleared.

Figure 11 - Cleared fields

Of course you can add more functionality to your Cancel button if required. An example of this is in the function below.

Show a message in the UI

function Cancel(five, context, result) {
    five.showMessage('Your form has been cleared');
    return five.success();
}

With the function attached to the On Cancel event when the Cancel button is clicked, all fields are cleared and a message will be shown in the UI.

Figure 12 - Show message

Add Five's Run Button

By default, if there is no function attached to the On Run or the Do Run events, there will be no Run button on your process. If a function is attached to the On Run or the Do Run events, a Run (tick) button will be added to your process. When the button is clicked your process will run and your function will be executed.

1. Navigate to the Functions view by selecting Logic in the menu and Functions in the sub-menu.

Figure 13 - Functions menu item

2. Click the Add Item button, give your function an ID, and click in the Code field to open the Code Editor.

Figure 14 - Add function

3. Add your code and click the Save button in the Code Editor app bar.

info

For this scenario, the code is checking if the Name, Email, and Message fields have valid data, if they do the process will sucessfully run otherwise an error will be returned.

Figure 15 - Save button

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

Figure 16 - Save button

5. Navigate to the Processes view by selecting Tasks in the menu and Processes in the sub-menu.

Figure 17 - Processes menu item

6. Select your process record in the list and click the Events tab.

Figure 18 - Events tab

7. Click the lookup icon in one of the Run fields and select your function.

tip

On Run executes in the frontend, Do Run executes in the backend!

Figure 19 - On Run field

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

Figure 20 - Save button

A Run button will be added to your process.

Figure 21 - Run button

When the Run button is clicked the process will run unless an error is created which will cause the proces to be unsuccessful.

Figure 22 - Invalid message