Customized Five's Action Buttons

Last updated 16/11/2021

How to Customized Five's Action Buttons

This documentation will explain how to customize Five's Edit, Cancel and Save buttons in a form's app bar.

The Edit, Cancel, and Save buttons are located in a form's app bar. These buttons are available in the form app bar in your end-user application by default, however, Five offers you the option to customize them. You can change the caption and/or add an icon.

Figure 1 - Five's default Edit, Cancel and Save butons

The caption will be seen in the form app bar if you only add a caption. For example, if you were to add Submit Form in the Complete Caption field, Five's Save button would be removed and would be replaced with Submit Form in the form app bar.

The icon will be seen in the form app bar if you only add an icon. If you hover your mouse above the icon you will see the tooltip caption Save.

The icon will be seen in the form app bar if you add a caption and an icon. If you hover your mouse above the icon you will see the tooltip caption that you entered in the either the Complete, Edit or Cancel Caption field.

tip

The steps explained to change the Save button caption and icon will apply to the Cancel and Edit captions and icons as well.

Change the Caption for the Save Button

info

The steps to add a caption and an icon are being performed on a saved form record. A new form can be added and the Complete Caption and Complete Icon fields can be used. You will need to add at least one page and one field to a new form.

1. Select Forms in the menu.
2. Select a form record in the list.
3. Click the Edit button in the form app bar.
4. Type a caption in the Complete Caption field.
5. Click the Save button in the form app bar.

Figure 2 - Change the caption for the Save button

How This Will Look in Your End-User Applicaton

Figure 3 - Customized caption for the Save button

Change the Icon for the Save Button

1. Select Forms in the menu.
2. Select a form record in the list.
3. Click the Edit button in the form app bar.
4. Click the Edit button in the Complete Icon field.
5. Navigate your files and open the required image file.
6. Click the Save button in the form app bar.

Figure 4 - Change the icon for the Save button

How This Will Look in Your End-User Applicaton

Figure 5 - Customized icon for the Save button

Change the Caption and the Icon for the Save Button

1. Select Forms in the menu.
2. Select a form record in the list.
3. Click the Edit button in the form app bar.
4. Type a caption in the Complete Caption field.
5. Click the Edit button in the Complete Icon field.
6. Navigate your files and open the required image file.
7. Click the Save button in the form app bar.

Figure 6 - Change the caption and the icon for the Save button

How This Will Look in Your End-User Applicaton

Figure 7 - Customized caption and icon for the Save button

How to Edit the Customization on an Action Button

1. Select Forms in the menu.
2. Select the required form record in the list.
3. Click the Edit button in the form app bar.
4. Click the Cancel button in the required Caption field.
5. Type the your new caption in the required Caption field, and/or
6. Click the Edit button in the required logo field.
7. Navigate your files and open the required image file.
8. Click the Save button in the form app bar.

Figure 8 - Edit action button customization

How to Remove the Customization on an Action Button

1. Select Forms in the menu.
2. Select the required form record in the list.
3. Click the Edit button in the form app bar.
4. Click the Cancel button in the required Caption field, or
5. Click the Delete button in the required Logo field.
6. Click the Save button in the form app bar.

Figure 9 - Remove action button customization