When it comes to a Floating Action Button, also known as FAB Button, it is a button that expands its elements upon being clicked.

• 1. Summary
• 2. Result
• 3. Step by Step Guide
• 3.1 Step 1
• 3.2 Step 2
• 3.3 Step 3
• 4. Documentation

1. Summary

The Floating Action Button can be used for different actions. It can be included in a grid to perform actions on it.

2. Result

See in the above pictures

3. Step by Step Guide

3.1 Step 1

Create a menu function for your button. The general procedure is described in the following: Actions

Here is an example of a floating action button to create new records:

The code in the Action Options is used to create a new record. However, what is inside the function varies depending on the use case.

{'autoAdd': true, 'foreignKeyProvider': '$ []'}

3.2 Step 2

To create a Floating Action Button, you need to create a corresponding menu structure. How to do this is explained on the following page. Menu structure

Below is an example of a menu structure for a new floating action button

1. Start of the menu structure for an application.
2. Group to organise an application.
3. Group for all fab buttons to be used in this application.
4. Fab button object. → Collapsed fab
5. Actual buttons in the Fab → Extended buttons (You can add as many as you want)

3.3 Step 3

This Fab button can now be integrated into any Grid object.

1. Open the screen where your Grid is located.
2. Go to the attributes of the Grid.
3. Look for the attribute "FloatingActionButton".
4. Insert the Menu Structure Code from Step 3.2 → Point 4 here as the attribute value.
5. Save the settings and launch the screen.
6. The Fab Button is now located in the bottom left corner of the Grid and can be used.

4. Documentation

To find more information, you can check the following documentation.

Grid / Table

Back to Use Cases

Back to Home Page