Group Box

Overview

Display blocks are the top-level visual containers for the content in your views. Most views work well with the single level of containership and organization that display blocks provide.

But some views are complex enough to warrant yet another level of organization of the data within their display blocks. Group boxes offer this secondary level of containership and organization, within display blocks. Each group box has a title, with its content displayed below that.

Group boxes are used to further organize content within a display block. You can place group boxes as top-level children within the display block or you can nest group boxes within a tab component. But you should not place group boxes anywhere outside of a display block, in dialog boxes, in toolbars, or anywhere else other than inside a display block.

You can present multiple group boxes within the same display block. You can lay out multiple group boxes in a display block using either responsive layout or fixed layout.

Unlike display blocks, you must always set a title for each group box.

If you have buttons or other elements that apply only to the data within one specific group box, you can optionally include a toolbar within that group box. Group box toolbars display below the group box title.

Group boxes can operate in one of three different modes: simple, expandable, and accordion. Each of these modes is discussed below.

Simple group boxes

Simple group boxes display a header, with their content below that.

Expandable group boxes

Expandable group boxes display a header and content just like simple group boxes, but they also allow the user to dynamically hide and show the content by clicking on the group box header. Clicking the header toggles between the expanded and collapsed states. The header displays an icon that indicates the expanded/collapsed state. Expandable group boxes can be initially displayed in either the expanded or collapsed state.

Accordion group boxes

Accordion group boxes are a collection of expandable group boxes where no more than one group box is open at a time. All accordion group boxes in the collection can be collapsed, but only one group box in the collection can be expanded at a time. Expanding an accordion group box will automatically collapse all other accordion group boxes in the collection.

A view can include more than one collection of accordion group boxes if needed. Your app defines which accordion group boxes are part of which collection. If you include multiple collections of accordion group boxes, they should typically appear in different display blocks to help the user better understand the groupings.

Fixed layout for group boxes

If you’re using fixed layout for group boxes, you must use simple group boxes in order to get the proper layout. Expandable and accordion group boxes are not supported in fixed layout.

Development

Web component development

Component reference

rui-group-box

Implementation

Begin by importing the rui-layout module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-layout/rui-layout-imports';

Implementing simple group boxes

Use the rui-group-box tag to create a group box. Nest the group box content within the opening and closing rui-group-box tags.

<rui-group-box titleText="Accounts">

    <!-- Group box content goes here -->

</rui-group-box>

Implementing expandable group boxes

If the user should be able to collapse and expand the group box content, set the isExpandable property to true. You can optionally have an expandable group box display initially expanded by setting the isExpanded property to true.

<rui-group-box titleText="Accounts" [isExpandable]="true" [isExpanded]="true">

    <!-- Group box content goes here -->

</rui-group-box>

If you need to track the group box’s expanded/collapsed state in your code, then handle the rui-is-expanded-change event to store the updated value passed in the event detail into the backing boolean value in your controller.

<rui-group-box titleText="Accounts" [isExpandable]="true" [isExpanded]="accountsGroupBoxExpanded"
    (rui-is-expanded-change)="accountsGroupBoxExpanded = $event.detail">

    <!-- Group box content goes here -->

</rui-group-box>

Implementing accordion group boxes

To create a collection of accordion group boxes, where no more than one group box in the collection can be expanded at a time, set the isExpandable property to true for each group box, assign the same value to the accordionGroup property for each group box in the collection, and assign a unique value to the accordionId property for each group box in the collection. You can optionally have one of the group boxes in the collection be initially expanded by setting its isExpanded property to true.

<rui-group-box titleText="Accordion Group Box 1" accordionGroup="GROUPA" accordionId="1" [isExpandable]="true" [jhaIsExpanded]="true">
    Content
</rui-group-box>

<rui-group-box titleText="Accordion Group Box 2" accordionGroup="GROUPA" accordionId="2" [isExpandable]="true">
    Content
</rui-group-box>

<rui-group-box titleText="Accordion Group Box 3" accordionGroup="GROUPA" accordionId="3" [isExpandable]="true">
    Content
</rui-group-box>

Implementing fixed layout for group boxes

See the fixed layout development doc for info on how to set up fixed layout for group boxes.

Angular wrapper development

Wrapper reference

jha-group-box

Implementation

Begin by importing JhaLayoutModule and BrowserAnimationsModule into your application.

// import into app.module
import { JhaLayoutModule } from '@jkhy/responsive-ui-angular/jha-layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        ...
        JhaLayoutModule,
        BrowserAnimationsModule,
        ...
    ]
})

export class AppModule(){}

Implementing simple group boxes

Use the jha-group-box tag to create a group box. Nest the group box content within the opening and closing jha-group-box tags.

<jha-group-box jhaTitle="Accounts">

    <!-- Group box content goes here -->

</jha-group-box>

Implementing expandable group boxes

If the user should be able to collapse and expand the group box content, set the jhaIsExpandable property to true. You can optionally have an expandable group box display initially expanded by setting the jhaIsExpanded property to true.

<jha-group-box jhaTitle="Accounts" [jhaIsExpandable]="true" [jhaIsExpanded]="true">

    <!-- Group box content goes here -->

</jha-group-box>

If you need to track the group box’s expanded/collapsed state in code, then use two-way binding on the jhaIsExpanded property to bind this to a boolean value in your TypeScript. There is also a jhaIsExpandedChange event for the rare case where you need to update anything else in your TypeScript whenever the jhaIsExpanded value changes (not shown here).

<jha-group-box jhaTitle="Accounts" [jhaIsExpandable]="true" [(jhaIsExpanded)]="accountsGroupBoxExpanded">

    <!-- Group box content goes here -->

</jha-group-box>

Implementing accordion group boxes

To create a collection of accordion group boxes, where no more than one group box in the collection can be expanded at a time, set the jhaIsExpandable property to true for each group box, assign the same value to the jhaAccordionGroup property for each group box in the collection, and assign a unique value to the jhaAccordionId property for each group box in the collection. You can optionally have one of the group boxes in the collection be initially expanded by setting its jhaIsExpanded property to true.

<jha-group-box jhaTitle="Accordion Group Box 1" jhaAccordionGroup="GROUPA" jhaAccordionId="1" [jhaIsExpandable]="true"
 [jhaIsExpanded]="true">
    Content
</jha-group-box>

<jha-group-box jhaTitle="Accordion Group Box 2" jhaAccordionGroup="GROUPA" jhaAccordionId="2" [jhaIsExpandable]="true">
    Content
</jha-group-box>

<jha-group-box jhaTitle="Accordion Group Box 3" jhaAccordionGroup="GROUPA" jhaAccordionId="3" [jhaIsExpandable]="true">
    Content
</jha-group-box>

Implementing fixed layout for group boxes

See the fixed layout development doc for info on how to set up fixed layout for group boxes.

Component playground

Design

Figma design

After adding a group box to your design, resize it and change the title in its header to an appropriate value.

Adobe XD design

It can be helpful to lock the group box component while you drag other components onto it.

After adding a group box to your design, resize it and change the title in its header to an appropriate value.