Back Forward Harness, Section, and Flow Action forms
Adding a Tree Grid layout

About Harness rules

  Show all

A Tree Grid layout allow users to view (and possibly edit) the data in an embedded Page List or Page Group property. The layout combines the navigation strengths of a tree control with the quick-access data display of a grid; the layout can display a custom skin; is cross-browser compatible; is sortable by column and fields; can be configured to be editable and localizable.

TipIn many situations, the Tree Grid is an improved alternative to Row Repeat, Column Repeat, or Tabbed Repeat controls when large amounts of data need to be displayed, is easier to implement and maintain, and is more convenient for those who have to work with the displayed data.PROJ-185 Sequoia

 Adding a Tree Grid layout

You can quickly add a tree grid layout to a section in either of two ways:

Start with the data

  1. Select or create a section to hold the layout.
  2. In the Application Explorer, select the Page List or Page Group property or Report Definition you want to use in your layout and drag it to the section.

    If the Report Defintion is a summary type (contains one or more columns using a summary function), the layout defaults to Tree Grid. Otherwise, the layout defaults to a Grid. See Adding a Grid layout. V6.2 GRP-23358 RD as source – pashm
  3. Drop the rule above or below the default layout. In the pop-up dialog that appears (does not appear for Report Definition), select TreeGrid as the layout type.
  4. Delete any default layout you do not need.
  5. Complete the configuration steps described in this topic.

Start with the layout

  1. Select or create a section.
  2. Click the down-arrow (Arrow) at the right end of the Layout group (Layout group) and select Layout (Layout).
  3. Click and drag the layout into the section. When the pointer changes shape to indicate that you can drop the layout, release the mouse button.
  4. On the Layout Options form:
    1. Click the Repeating radio button.
    2. Select TreeGrid as the repeat type.
    3. Click OK.
  5. Delete any default layout you do not need.
  6. Complete the configuration steps described in this topic.

To delete a TreeGrid layout, select the layout and click the Delete Row button (). Do not use the Delete Cell button for this action.

How to use the properties panels

You configure many elements in a Tree Grid layout using properties panels. To display the panels, turn on the wireframe, select an element, and click the magnifying glass icon (Magnifying glass). To select an element, click the following:

Property fields may appear at the top of the panel, or in one or more tabs. If the panel is pinned (Pinned), click Apply to apply your changes. Click the red x at the top right of the panel to close it. If the panel is not pinned, click Apply to apply your changes and continue editing, or OK to apply your changes and close the panel.

 Parts of a Tree Grid layout

The layout has three areas:

treeGrid parts

 Adjust the Tree Grid layout area

treegrid layout top

Select the Tree Grid Layout header and open the properties panel. Configure the layout using the following fields:

Field

Description

Format

Choose a format to control what appears above the layout (known as a header or subheader), and the appearance of both the header or subheader if any, and aspects of the body.

This choice primarily affects styles and appearance. Information in or below a subheader (including Hidden Sub) presents information that is right-indented from information in a header.

Using the Branding wizard, you can review or revise the styles (colors, fonts, padding and margins) associated with each header or subheader format.

Group/Selection

Description

Default

 
No Format No header or subheader appears. In addition, no styles applied to the body that are specific to this layout, including background, fonts, colors, padding, margins, and so on. The appearance of the body depends on styles of the enclosing control (which may be another layout).

Header

 

Standard For a bolder or more prominent header.
Custom For a custom header. Select in the HTML field an HTML rule that defines the content and appearance of the custom header.
Hidden For no header. (This option is not available for the top-level of a harness rule).

SubHeader

 

Standard (sub) For a bolder or more prominent sub header.
    A

  B

  C

  D


These names are provided so that you can apply separate styles to up to five types of subheaders (including the basic SubHeader). For example, if your forms include three hierarchical levels of subheaders, you can select A for the highest level, B for the middle level, and C for the lowest level.

In the standard style sheets, these subheaders function identically; they differ only in minor ways in the presentation of the subheader:
  • A — No bar in the subheader
  • B — Underlined subheader label
  • C — Outline border
  • D — Black font
Simple Preserves V5.5 flow action styles for layouts created from V5.5-style flow actions. BUG-26946 V6.1SP1.
Outline Provides no header area, but a border around the contents of the layout with a single text label. (This produces HTML FieldSet and Legend elements.)
Hidden (Sub) Provides no subheader, but indented body.
In the workform CSS style sheets, the various styles named groupTitleBarzzzz define the appearance of the SubHeader element; for example groupTitleBarBackground. For A, the corresponding styles are named a_groupTitleBarBackground and so on. Similarly, the names of styles for B, C and D start with b_groupTitleBar, c_groupTitleBar, and d_groupTitleBar respectively.

Depending on your format choice, one or more of the following fields are available:

Title Provide a title to appear above the tree grid.
HTML Identify the second key part of an HTML rule that defines the display of the header contents.
Visible When Select or create a When rule to govern the visibility of the display. If you leave this field blank, the Tree Grid is always visible.

General tab

Depending on your Format choice, you may see here a Header Type field. The available options are:

Bar Provides a static horizontal bar at the top of the layout.
Tabbed Creates a new TabGroup to which additional layouts can be added.
Accordion Creates a new group of layouts that contain collapsible headers. Only one layout can be displayed at once.
Collapsible Provides a horizontal bar at the top of the layout, with the ability to expand or collapse, to show or hide the layout, when clicked.

Depending on your Header Type or Format choices, you may see one or more of these fields:

Expand When SmartPrompt Select a when condition rule to control whether this layout first appears expanded or collapsed. If you leave the field blank, the state of the layout (expanded or collapsed) when you save the Harness, Section, or Flow Action form becomes the state the next time the tree is displayed.
Defer Load? Appears for Tabbed or Accordion values of the Header Type. Select this option if you want the system to retrieve only the data necessary for the current tab or accordion display. When another tab or accordion is selected, the system will retrieve further data for it. This speeds up first display of the page.
Retrieve Activity SmartPrompt Appears when you select Defer Load. Select the activity that will retrieve the data.
New Tab Group? Select to present this layout as the first in a distinct group of tabs, identified by indenting and optionally styles.
New Layout? For Header Type of Accordion only. Select to start this accordion element as the first in a group.
Template Styles If you selected a Tabbed or Accordion header style, choose a SmartLayout template to control the number of columns created.
Width Select a grid width option to determine whether the width of columns are set as a percent of the grid or in absolute pixels. Use the options as follows:
px To have the column widths you specify appear as the minimum column width during runtime. A column expands if the content exceeds its minimum width.
%

To have the grid area adjust to fractions of the total width of the layout area. The widths of the matrix columns (specified in pixels) collectively represent 100% of the whole. For instance, if the three column widths are 250, 250, and 500 pixels, then the first two columns are each 25% of the total; the last column is 50%.

During runtime, a column expands if the content exceeds its minimum width.

px-fixedTo specify the column widths within the grid exactly as the fixed column width during runtime.
CautionThe display may truncate (partially obscure) a data value if the value is wider than width defined by the pixel value. The user can resize the columns to view the truncated content.
Style Select a style for previewing repeating area elements (text, borders, backgrounds, and images) as defined in the workform CSS text file created by the Branding wizard. Specify the appropriate skin in your Designer Studio General Preferences panel. The initial settings are as follows:
Default New skin rule defaults or the QuickCreate settings.
Spreadsheet Solid borders and blue gradient headers.
Transparent Transparent backgrounds and no borders.
Use the Branding wizard to modify the settings for any of the styles. Open the 4. Styles and Formats panel in the wizard and select Category Layouts >> ElementRepeating >> Format Spreadsheet, Default, or Transparent.See Branding wizard — Layouts.

Advanced tab

Depending on your choice of Format, additional fields may appear:

Header Image

To add a header image at the top of the Tree:

  1. Open its property panel for this field to start the Image Catalog (a pop-up version of the Image Gallery landing page).
  2. Search for the image you want to use by entering a text string in the Search field and clicking Find.
  3. Select an image from the resulting display: at the top right of the panel details about the image appear.
  4. To use the selected image, click OK.

noteThe image must already be present in a binary file rule that is part of your application; you cannot search your local computer or the Internet through the Image Catalog.

Image Title Appears when you have selected a header image. Add text here to describe the image: those using assistive devices will hear this title although they may not be able to perceive the image.
Style Prefix

Optional. If the Header Type is Tabbed or Accordion, this field provides the ability to reference a family of custom styles for headers. Enter a single letter or a few letters that designate a collection of styles for this header.

For example, type A in this field to use styles named .A_standardheader* rather than the normal .standardheader* styles. Define the prefixed styles in your workform_zzzzz.css text file (created by the Branding wizard) or in another text file that you identify on the Scripts and Styles tab of the Harness form.

To learn more about style sheets, see Understanding CSS styles.

Tree Grid title cell properties

If you select the Standard or Standard (sub) formats, a field appears to the right of the tree grid's title.

In the field's properties panel you can set the following values:

Value SmartPrompt Select a field value that appears as the column title.
Label For SmartPrompt Indicate the property that appears in this column in the repeating rows.

General tab

Visible Select one of the options presented. The default is Always. If you select Other Condition, the Condition field appears. Select or create the When rule that governs this cell's visibility.
Required Select this option to make this a required field if the user adds data to the display.
Wrap Text Select this option so long text entries in this field appear over multiple lines, rather than requiring a scrollbar.
Read Only Select this option to prevent edits to this field. You can refine this control by selecting or creating a When rule in the Read Only Condition field that appears when you select this option.

Advanced tab

Width Specify the cell width in pixels.
Height Specify the cell height in pixels.
Default Value Specify a default value for this field. Click the magnifying glass icon (Magnifying glass) to display the Expression Builder, where you can select or create an expression to generate the default value. Leave the field blank if it does not require a default value.
Read-Write Style SmartPrompt Displays the stylesheet settings for this cell when editing is enabled.
Read-Only Style SmartPrompt Displays the stylesheet settings for this cell when editing is disabled.
Inline Style Optionally, override the stylesheet settings in this cell with local values.

Enter CSS code for an inline style for a cells in the column. For guided assistance in composing a style definition, click the magnifying glass icon (Magnifying glass) to open the Style Editor. You can select from predefined lists or type a style definition directly, and preview the results.

Use Heading Styles Select this option to display the cell values with the same style the column heading uses — changes the cell HTML element from <TD> to <TH>, with a resulting style change.

 Adjust the Tree Grid repeating area

 Adjust the action areas

Up About Flow Action rules

Up About Harness rules

Up About Section rules