Group Box

Last modified: August 20, 2024

Introduction

A group box can be used to visually group related widgets together. Group boxes are displayed as a frame around nested widgets with an optional header. Group boxes can be configured to collapse and expand dynamically.

Properties

An example of group box properties is represented in the image below:

Group Box Properties

Group box properties consist of the following sections:

Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

General Section

Show Header

Show Header defines whether a header is shown above the group box.

Default: True

Caption

This property is only displayed when the Show Header option is enabled. It defines the caption that is shown in the header.

Default: Group box

Collapsible

This property specifies whether the group box can be collapsed by clicking the header and if so, whether it is displayed collapsed or expanded. This property is only displayed when the Show Header is enabled.

Possible values of this property are the following:

  • Yes (start expanded) (default) – the elements inside the group box will be initially displayed and can be collapsed when a user clicks a minus icon in the header
  • Yes (start collapsed) – the elements inside the group box will be initially hidden and can be expanded when a user clicks a plus icon in the header
  • No – group box elements are always displayed and the group box cannot be collapsed

Visibility Section

Visibility determines whether a widget is displayed to the end-user as part of the page.

For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.

Read More