Working with Group Boxes
This topic discusses the many uses of group boxes while creating fluid applications.
Group boxes are essential containers used for the layout of the fluid page as well as containers for encapsulating and managing control and widget behavior, positioning, and appearance.
Any fluid page must have at least one over-arching group box to contain all other elements of the page. Depending on the number of controls and complexity of the page, additional group boxes can be added. The group box can be used to indicate visual cues but it can also act as a logical grouping of related controls. Using the fluid properties for a group box, you can override or customize the style at each group box layer.
The following example illustrates the use of multiple group boxes in the layout of the fluid page, clearly separating the page elements into distinguishable parts, enabling individual control if needed. For example, the Page Title group box and the Your Content Sub-Page here group box can have individual styles applied if needed.
Every Fluid page should start with a group box. Typically, the outer group box for primary or secondary pages should have the style of ps_apps_content class, though there are exceptions as with 2 panel display. While the ps_apps_content style would not typically be used in subpages, subpages should reside within a containing group box as well.
Image: Group Boxes define fluid page layout
This example illustrates how group boxes are used in the layout of the fluid page, clearly separating the page elements into distinguishable parts.
![Example of group boxes defining the layout of a fluid page](img/i7cb09f96n-7eb6.png)
In general, it is recommended to be generous in the use of group boxes to layout and organize your page elements. However, group boxes are not just used for layout purposes. For some controls and widgets, it is required that they be encapsulated within a group box in order to apply behavior characteristics.
In addition to using group boxes as a container with a header (the default type of group box), a group box can have additional functions and behaviors. The most common is the usage of a layout type of group box. Layout group boxes are used to enclose elements for specific layout purposes. Some layouts are defined by styles only.
Some group boxes have additional types, like the Accordion Vertical group box which allows for multiple embedded Accordion group boxes to provide the behavior of a mutually exclusive display of group box, with only one of the Accordion Group boxes expanded and visible at any one time. Group boxes can even be put inside of grids to create new virtual columns containing multiple stacked fields.
Group boxes are the most critical element with which you should become familiar for fluid page development.
This section describes properties specific to group boxes on a fluid page that you can set on the Fluid tab of the Group Box Properties dialog box.
Application Specific Styles and Suppress On Form Factor are common properties to all fluid controls. See Setting Properties on the Fluid Tab.
Field or Control |
Definition |
---|---|
Group Box Type |
|
HTML Tag Type |
Selecting an HTML tag type enables you to create proper HTML structure as defined by HTML specifications.
|
Draggable |
Indicates that content can be dragged out of the group box area. Users initiate drag and drop by using touch on touch screen devices and by using the mouse for desktops and laptops. |
Droppable |
Indicates that content can be dragged into the group box area. |
Gestures |
Select for group boxes where the drag, drop, and swipe gestures need to be available. Use to limit the scope of the drag, drop and swipe features so that these events are set and invoked efficiently. For example, assume you want to drag an element from group box A to group box B, and the parent of these two group boxes is group box C. If you select Gestures for group box C, you do not need to set it individually for group box A and B. |
Scroll Bars |
|
Scroll Sizing by Style |
Indicates that the size of the scroll will be controlled by style. By default, PeopleTools attempts to control the sizing of the group box to accommodate the size of the current page size. If you want to restrict the size of the group box stylistically (using classes and CSS), you can do this so that the system does not attempt to change the size of the group box as needed. |
Container group boxes can be used as a standard container, similar to classic application usage. Use group boxes to associate relevant page field controls and to create a page that is intuitive to the user.
When using container group boxes, keep these items in mind:
A default, system style provides a standard look and feel.
A header will be generated if a label is defined.
Custom styles can be used to override default styles.
The default HTML tag used for group box is “div,” which you can override with the HTML Tag Type option.
You can set the group box as Section and Article elements.
Can be used as a collapsible data area.
The Accordion is a web control that allows you to provide multiple, collapsible panes and display them one at a time. With an accordion group box,
When working with the accordion feature:
Set the parent group box container as Accordion Vertical for vertical accordion behavior (up and down) or Accordion Horizontal for horizontal accordion behavior (left and right).
Set the children group boxes (the group boxes that will be the recipient of the expanding and collapsing behavior) as Accordion Group Boxes.
Note: Horizontal Accordion group boxes should not be used in the current release. It is reserved for internal use.
Image: Accordion Group Box Container Structure
This example illustrates that when creating an accordion construct, the outer group box is assigned the Accordion Vertical group box type, and the content within resides in group boxes of type Accordion Group Box.
![Accordion group box container structure](img/i398ea5ban-7f5d.png)
Image: Accordion Group Box Vertical After Page Load
This example illustrates how an accordion group box appears initially, after page load, with all sections collapsed, by default.
![Accordion group boxes after page load](img/i398ea5ban-7f5c.png)
Image: Accordion Group Box Vertical After Selecting a Section
This example illustrates how one section can be expanded at a time, showing the page content within, while keeping the other sections collapsed, saving display space.
![Accordion group box with one group box expanded and the others collapsed](img/i398ea5ban-7f5b.png)
The layout group box is used only for layout for positioning its child elements. When using layout group boxes, keep these items in mind:
No default look and feel style is applied, such as no border.
No header will be generated.
The label set for the group box will be ignored at runtime, but can be used at design time for reference.
Before creating any sort of custom headers, become familiar with the default system header page definition, PT_HEADERPAGE.
You can use the Custom Header Left/Middle/Right/Bottom group box types to reparent custom controls to the default header. You will notice that the default PT_HEADERPAGE header page definition contains a left box, middle box, right box and a bottom box. Each of these group boxes also contains a Custom group box; these correspond directly to the Custom Header group box types and are used to inject custom application controls into the header page sections. On your page definition, create Custom Header Left/Middle/Right/Bottom group box types as needed for your custom controls. At runtime, the content of the Custom Header group boxes will replace the content of the related Custom group box in the header page.
Note: During page rendering, the system identifies the first focusable field based on the organization of the page definition and places the cursor there unless overridden by SetCursorPos PeopleCode. When adding custom buttons to the header of a primary page or a secondary page (for example, when using any of the Custom Header group box types), place the group box with the custom buttons at the bottom of your page definition. This will prevent the custom button from being identified by the system as the first focusable field.
Alternatively, if you do not want to use the default system header page, you can create your own custom header page. See Selecting Page Types.
Use related field group boxes to group or associate a set of fields. The fields will be enclosed in
<fieldSet>…</FieldSet>
The group header will be within <legend> instead <h..>.
The Collapsible Data Area option should not be used for related field group boxes.
Using the group box type Related Content, you can display embedded related content on a fluid page.
Existing tile definitions can be utilized as related content on fluid pages either as an anonymous service or as an explicitly defined related content service using the PeopleSoft Tile URL type.
Image: Related Content Group Box Type
This example illustrates setting the Group Box Type value to Related Content, resulting in the Autosize check box to appear.
![Selecting Related Content as the Group Box Type.](img/i398ea5ban-7f4f.png)
Note: When you set the Group Box Type to Related Content, the Autosize check box appears automatically. The Autosize check box on the Fluid Attributes tab for the associated content reference controls the autosize feature for the embedded related content. The Autosize check box in Application Designer applies only to interactive grouplets.
The following procedure provides an example of adding embedded related content to your fluid page. You will complete some of the steps in Application Designer and some in the Manage Related Content Service component in your browser.
Adding a Related Content Group Box to a Fluid Page
To add a related content group box fluid page in Application Designer:
Insert a group box on your fluid page in the general position you would like it to display.
Double-click the group box, and set the Group Box Type to Related Content on the Fluid Tab of the Group Box Properties dialog box.
(Optional) Select the Group Box Properties dialog box: Label tab and enter a descriptive label for the displayed related content.
The label is not rendered at runtime, but it can help in the design time by:
Indicating in which field the content will display.
Differentiating one Related Content group box from another in the case of multiple Related Content group boxes on a page, which is helpful when assigning the appropriate related content to the correct Related Content group box.
Image: Related Content Group Box
This example illustrates a Related Content group box added to a fluid page, with a customized label for identification.
(Optional) Assign style, if needed, to this group box using delivered styles. Recall that the system applies default styles, and you would only require additional styling to override or enhance the default styling.
One of the options for styling is to override the default sizing. If no additional styling is specified, then the embedded related content consumes the default size, which depends on the container or page.Select the Group Box Properties dialog box: Fluid tab.
Enter a style name in the Default Style Name field:
To use less than the full width of the container or page, enter the percentage of the width. For example:
psc_width-80pct
.To specify a fixed height, specify the height in ems. For example:psc_height-50em
.
Save your changes.
Assigning Page-Level Related Content to the Related Content Group Box
Sign in using your browser, and select
.Click the Assign Related Content to an Application Page link and select the content reference associated with the component of your fluid page.
Once selected, the component appears in the Content Reference list on the Manage Related Content for Content References page.
On the Manage Related Content for Content References page, click Edit for your content reference.
Select the page-level information in the Page Level Related Content group box as described in Assigning Related Content to Fluid Pages.
Image: Assigning Page Level Related Content
The following example illustrates sample settings used to assign embedded related content to a fluid page.
Because group boxes are essential to the layout of the fluid page and all of its elements, being able to determine exactly the contents of a group box container is also essential. Select Layout Only on the Fluid tab of the Component Properties dialog box.
Image: Enabling Group Box Layout Testing
This example illustrates where you enable group box layout testing on the Component Properties dialog box, by selecting Layout Only.
![Example of using layout mode](img/i398ea5ban-7f58.png)
At run time, the system displays the fluid page in the browser using different colored boxes to depict the scope of each group box on the page, providing visual indication for you to verify the scope and contents of each group box container.
Image: Group Box Testing Display
This example illustrates the different colored boxes indicating the scope and coverage of each group box using the My Preferences page (PTGP_USER_PERS_FL).
![Example of the colored layout mode](img/i398ea5ban-7f56.png)