Overview

A customizable Floating Action Button group for Mendix native apps, enabling quick access to multiple actions with an intuitive, expandable UI.

Documentation

FAB Group Widget Documentation

The FAB Group widget brings a Floating Action Button group to Mendix native mobile apps. It enables a main FAB that expands to reveal multiple action buttons, providing quick access to key operations in a mobile-friendly layout. Ideal for task-based apps that require compact and intuitive UX.

Features

• Floating main action button

• Expandable list of child action buttons

• Optional labels and icons for child buttons

• Horizontal or vertical expansion

• Open/close animation

• Customizable position, colors, and icons

• Triggers microflows or nanoflows

• Native mobile compatible and offline-friendly

Installation

1. Download the widget from the Mendix Marketplace or import the .mpk file into your Mendix project.

2. Open Mendix Studio Pro and drag the FAB Group widget onto a native mobile page.

3. Configure the widget using the Properties pane.

Configuration

FAB Buttons

Child Buttons (Required): A list of child Floating Action Buttons that appear when the group is expanded.

For each child button:

• Label (Optional): A string value that will be displayed next to the child FAB.

• Icon (Required): The icon that will be shown in the child button.

• On Press Action (Required): The microflow or nanoflow that is triggered when the child FAB is tapped.

Styling

You can customize the appearance of the FAB Group using the following properties:

• Main Icon Background Color: The background color of the main FAB icon. Default is #D6B4FC.

• Action Icons Background Color: The background color of the child action buttons. Default is #CBC3E3.

• Action Icons Color: The icon color for all child buttons. Default is #21005D.

• Action Text Color: The text color used for any labels. Default is #000.

• Backdrop Color: The semi-transparent background color displayed when the group is expanded. Default is rgba(255, 255, 255, 0.9).

• Bottom: Position of the FAB Group from the bottom of the screen in pixels. Default is 50.

• Right: Position of the FAB Group from the right of the screen in pixels. Default is 30.

Usage Example

To create a FAB group for quick actions like Add, Edit, and Delete:

1. Set a “+” icon as the Main Icon.

2. Add three child buttons with icons for Add, Edit, and Delete.

3. Add labels like “Add Item”, “Edit Item”, and “Delete Item”.

4. Configure each button's On Press action to trigger the respective microflow.

Developer Notes

• Built using React Native for Mendix Native Mobile apps.

• Uses Animated.View for open/close transitions.

• No external library dependencies.

• All child buttons are configured through the Properties pane.

Known Issues / Limitations

• Labels may overflow if too long, especially in horizontal mode.

• No built-in support for dynamic visibility per child button. Use microflow logic for conditions.

• Available only for Mendix Native Mobile; not supported in web apps.