Action Buttons
Last updated 9/04/2025
The On Press and Do Press events can be used individually. All three events can be chained together. The On Complete event can be chained to either the On Press event, or the Do Press event, or both. The On Complete event will be called if the On Press event and the Do Press events are successful.
The On Complete event can be used on its own, however, it is not recommended as it is designed to run after the On Press and Do Press events.
Event | Executes | Description |
---|---|---|
On Press | Client | Executes when an action button is clicked. |
Do Press | Server | Executes when an action button is clicked, if chained to the On Press event, it will be called after the successful execution of the On Press event. |
On Complete | Client | Executes when an action button is clicked, when chained to the On Press event, it will be called after the successful execution of the On Press event. When chained to the Do Press event, it will be called after the successful execution of the Do Press event. When chained to the On Press and Do Press events, it will be called after the successful execution of the On Press and Do Press events. |
How to Use Action Buttons
The following explains what is available on an action button when adding the button to different actions. When setting variables using Five's
Forms
The
{"Form": {"Name":"John", "Product.ProductID":"b7edcc3e-e101-414d-834d-83adc7834f18"}, "FileName":""}
The
Processes, Charts, Reports, Dashboards, and Mail Merges
The
Data Views
The
Data field values are available through Five's
Chaining Events for an Action Button
This documentation will demonstrate how you can chain the On Press, Do Press, and On Complete events together for an action button. The following will be added in Five to demonstarte chaining events for a button:
- Button Demo application
- Message Email mail merge
- Send Message process with an action button
- ValidateData function for the On Press event
- SendEmailServer function for the Do Press event
- EmailCompleted function for the On Complete event
- Send Message menu item for the process
If you are building the application, you can't have both application ID's called ButtonDemo.
You will need to add your SMTP settings on the instance record for the mail merge to work.
For this example, an action button will be attached to a process. When using an action button on a process and using the Do Press event, variables need to be set for the screen fields for them to be available in the backend.
Add the Button Demo Application
The Button Demo application is used to demonstrate adding an action button to an action and chaining all three events together for the one button. To follow this tutorial, you need to be in the Applications view to begin with.
1. Click the Add Item button.2. Type Button Demo in the Title field.

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

Add the Message Email Mail Merge
The Message Email mail merge will be sent through a function in the backend attached to the Do Press event. Before the mail merge can be sent the data will be validated on the Send Message process through a frontend function attached to the On Press event.
The mail merge has one screen field called Message. This will be passed into the mail merge template as a variable using

2. Select Tasks in the menu.
3. Select Mail Merges in the sub-menu.

4. Click the Add Item button.
5. Type Message Email in the Title field.

6. Click the Screen Fields tab.

7. Click the Add Screen Fields button.

8. Type Message in the Caption field.
9. Click the lookup icon in the Display Type field and select _Text.

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

11. Click the General tab.

12. Type Message from Message Centre in the Subject Text field.
13. Click in the Merge Text field to open the editor.

14. Type Hi
15. Click the lookup icon in the Tags tool and select Message.

16. Click the Save button in the editor app bar.

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

Add the Send Message Process
The Send Message process will have three screen fields Name, Email, and Message, these fields will be set as variables in the
2. Select Processes in the sub-menu.

3. Click the Add Item button.
4. Type Send Message in the Title field.

5. Click the Screen Fields tab.

6. Click the Add Screen Fields button.

7. Type Name in the Caption field.
8. Click the lookup icon in the Display Type field and select _Text.

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

10. Click the Add Screen Fields button.

11. Type Email in the Caption field.
12. Click the lookup icon in the Display Type field and select _Email.

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

14. Click the Add Screen Fields button.

15. Type Message in the Caption field.
16. Click the lookup icon in the Display Type field and select _Memo.

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

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

Add The ValidateData Function
The
The
The Name, Email, and Message screen fields are set as variables with Five's
2. Select Functions in the sub-menu.

3. Click the Add Item button.
4. Type ValidateData in the Function ID field.
5. Click in the Code field to open the Code Editor.

6. Copy and paste the code block below into the editor.
function ValidateData(five, context, result) {
if (five.field.Name === '') {
five.showMessage('Please enter the name for the recipient');
return five.createError('Invalid Name');
}
if (five.field.Email === '') {
five.showMessage('Please enter an email address to send the message too');
return five.createError('Invalid Email');
}
if (five.field.Message === '') {
five.showMessage('Please enter a message to send to : ' + five.field.Email);
return five.createError('Invalid Message');
}
five.setVariable('name', five.field.Name);
five.setVariable('email', five.field.Email);
five.setVariable('message', five.field.Message);
return five.success(result);
}
7. Click the Save button in the Code Editor app bar.

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

Add the SendEmailServer Function
The
If all the data is valid in the Name, Email, and Message screen fields on the Send Message process, when the Send button is clicked, the Do Press event will execute after the On Press event
and send the Message Email mail merge using Five's
2. Type SendEmailServer in the Function ID field.
3. Click in the Code field to open the Code Editor.

4. Copy and paste the code block below into the editor.
function SendEmailServer(five, context, result) {
result = five.executeAction('MessageEmail', {SMTPToEmail: five.variable.email, SMTPToName: five.variable.name, Message: five.variable.message});
if (!result.isOk()) {
return result;
}
return five.success(result);
}
5. Click the Save button in the Code Editor app bar.

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

Add the EmailCompleted Function
The
If the Do Press event is executed successfully when the Send button is clicked, the On Complete event will execute after the Do Press event and show the message passed into Five's
2. Type EmailCompleted in the Function ID field.
3. Click in the Code field to open the Code Editor.

4. Copy and paste the code block below into the editor.
function EmailCompleted(five, context, result) {
five.showMessage('Email has been sent');
return five.success(result);
}
5. Click the Save button in the Code Editor app bar.

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

Add the Send Action Button
The Send action button will be attached to the Send Message process. All three functions will be attached to the event fields for the action button. When the button is clicked, the events will consecutively execute on success of the previous event.
1. Select Tasks in the menu.2. Select Processes in the sub-menu.

3. Select the Send Message process record in the list.
4. Click the Action Buttons tab.

5. Click the Add Action Buttons button.

6. Type Send in the Caption field.
7. Click the Events tab.

8. Click the lookup icon in the On Press field and select ValidateData.
9. Click the lookup icon in the Do Press field and select SendEmailServer.
10. Click the lookup icon in the On Complete field and select EmailCompleted.

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

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

Add the Send Message Menu Item
The Send Message menu needs to reference the SendMessage (Process) action to be available in the Button Demo application.
1. Select Visual in the menu.2. Select Menus in the sub-menu.

3. Click the Add Item button.
4. Type Send Message in the Caption field.
5. Click the lookup icon in the Action field and select SendMessage (Process).

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

Button Demo Application
In the Button Demo application, when the correct data is entered into the Name, Email, and Message fields, the On Press event will execute successfully when the Send button is clicked. If the data is invalid, an error would be created and the Do Press event will not be called.

After the On Press event has executed successfully, the Do Press event will execute and send the email to the recipient.

After the Do Press event has executed successfully, the On Complete will execute and display a message in the UI.
