Group Box

Last modified: July 1, 2023

1 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.

2 Properties Pane

The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling. Group box properties consist of the following sections:

Properties:

Styling:

3 Properties

3.1 General Section

3.1.1 Show Header

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

Default: True

3.1.2 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

3.1.3 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

3.2 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.

3.3 Common Section

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

4 Styling

4.1 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.

4.2 Common Section

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

5 Read More