Custom group box widget

Content Type: Widget
Categories: User Interface

Overview

Groupbox widget that allows content in the header

Documentation

CustomGroupBoxWidget

Custom group box widget for web

Features

In addition to default groupbox, place content in the header.

Usage

No specific installation. Just put your content in the header and body sections.

Header mode

The default styling of the widget matches the header mode Div of the default groupbox widget. For using header (enlarged text) styles, make sure to style your header content similar to the default groupbox if you want to match the styling.

Styling

The widget can work with the same classes Mendix provides for the default group box widget. To make this easier you can adjust the settings.json file to add design properties for the widget. The test project in the GitHub repository has an example

Have a look at the Mendix documentation page on design properties for more information.

The design properties for the widget:

        "itvisors.customgroupboxwidget.CustomGroupBoxWidget": [
            {
                "name": "Style",
                "type": "Dropdown",
                "description": "Choose one of the following styles to change the appearance of the groupbox.",
                "options": [
                    {
                        "name": "Brand Default",
                        "class": "groupbox-default"
                    },
                    {
                        "name": "Brand Primary",
                        "class": "groupbox-primary"
                    },
                    {
                        "name": "Brand Inverse",
                        "class": "groupbox-inverse"
                    },
                    {
                        "name": "Brand Info",
                        "class": "groupbox-info"
                    },
                    {
                        "name": "Brand Success",
                        "class": "groupbox-success"
                    },
                    {
                        "name": "Brand Warning",
                        "class": "groupbox-warning"
                    },
                    {
                        "name": "Brand Danger",
                        "class": "groupbox-danger"
                    },
                    {
                        "name": "Transparent",
                        "class": "groupbox-transparent"
                    }
                ]
            },
            {
                "name": "Callout style",
                "type": "Toggle",
                "description": "Enable the groupbox callout functionality to highlight the importance of the groupbox.",
                "class": "groupbox-callout"
            }
        ]

Issues, suggestions and feature requests

link to GitHub issues

Releases

Version: 3.0.0
Framework Version: 9.24.2
Release Notes: Mendix 9.24. Ensure groupbox always shows expanded in design mode
Version: 2.1.0
Framework Version: 9.18.3
Release Notes: Hide contents i.s.o. removing it after collapsing. Mendix 9.18.3.
Version: 2.0.0
Framework Version: 9.12.0
Release Notes: Mendix 9.12
Version: 1.3.0
Framework Version: 9.6.5
Release Notes: Dark mode icon
Version: 1.2.0
Framework Version: 9.6.0
Release Notes: Mendix 9.6, new icons, tested with Atlas 3