Harness and Section forms - 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

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

If the Report Definition 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
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.
Delete any default layout you do not need.
Add the properties you want to include by dragging a property name from the lists of properties in the Application Explorer and dropping it on the repeating cell in the layout. Alternatively, select properties the repeating Cell Properties panels.

If the data source is a Report Definition, the system creates and populates the layout columns using the columns that contain summary functions. You cannot add or delete columns.
Complete the configuration described in this topic.

Start with the layout

Select or create a section.
Click the down-arrow () at the right end of the Layout group () and select Layout ().
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.
On the Layout Options form:
1. Click the Repeating radio button.
2. Select TreeGrid as the repeat type.
3. Click OK.
Delete any default layout you do not need.
Open the Hierarchy Cell properties panel and specify the data source for the repeating grid. If you specify a Property, you can reference nested PageLists and PageGroups; for example, Page.Page.Page.Page.PageList.6.3 GRP-22720
Add the data source properties in the repeating Cell Properties panels.
Complete the configuration as 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 (). To select an element, click the following:

Sections — a header label on a wire frame
Rows and columns — a circle (o) next to or on top of a cell
Cells — inside a cell

Property fields may appear at the top of the panel, or in one or more tabs. If the panel is 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.

The layout has three areas:

Tree Grid parts

Layout area — The framework that contains the action and repeating areas. You define the header format, header type, and overall width.
Action areas — The top and bottom areas in which you can place buttons or other controls linked to actions, such as Add Item, Add Child, Delete, or Refresh. The default Grid actions are stored in the template rule, pzPegaDefaultGridIcons, which you can copy and modify to create your own configurations. 6.3 US-807 See Section and Flow Action forms — Adding a Button Control. To remove the default actions, clear the cell.
Applications prior to V6.3 do not use the pzPegaDefaultGridIcons template rule. 6.3 US-807
Repeating area — Between the action areas the system displays information dynamically created from the data source. The first row in this area holds column headers representing the fields in the data source. The second row repeats as needed to display the requested data. The leftmost column in this row contains the hierarchy control cell (), which contains controls that allow the user to display or hide data below the first display layer (for example, tasks within task groups). The right column contains the repeating data.

You can add or remove columns, specify what fields of the data source to include in what columns, or configure the data's appearance. You can place express action buttons in a repeat row to provide quick access to actions that do not require further user input such as "Quick Approve" or "Flag for Review." You can insert radio buttons or checkbox controls in fields in the repeating area to simplify data entry or selection of multiple rows for a bulk action

V6.2 GRP-23358 RD as source – pashm If the source is a Report Definition, the parent nodes show the aggregated data. When the user clicks on a title or count, the Report Viewer appears and displays details for that item. You cannot add, modify, or delete the columns. You can use a control in a cell to modify a property's appearance.

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 aspects of the body. This choice primarily affects styles and appearance. Information in or below a subheader (including Hidden Sub) present information that is right-indented from information in a header.

Using the Skin rule, you can review or revise the styles (colors, fonts, padding and margins) associated with header and subheader formats.

Group/Selection	Description
Default
`No Format`	No header or subheader appears. In addition, no styles are applied to the body of 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). Accept this default value in most cases to help ensure vertical alignment of columns even when multiple SmartLayouts appear on one form.
Header
`Standard`	Standard heading format, as defined in the Skin rule. See Skin form — Components tab — Layouts — Containers. `6.3 US-1586`
`Custom`	For a custom header. Select in the HTML field an HTML rule that defines the content and appearance of the custom header.
`Hidden`	Hidden header format (no header) as defined in the Skin rule. SeeSkin form — Components tab — Layouts — Containers . (This option is not available for the top-level of a harness). `6.3 US-1586`
SubHeader
`Standard (Sub)`	Sub heading format, as defined in the Skin rule. See Skin form — Components tab — Layouts — Containers. `6.3 US-1586`
A B C D	Sub heading format, as defined in the Skin rule. See Skin form — Components tab — Layouts — Containers. These subheaders function identically, but may differ in the presentation. 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. You may choose to format the sub headers as follows: A — No bar in the subheader B — Underlined subheader label C — Outline border D — Black font See Skin form — Components tab — Layouts — Containers. `6.3 US-1586`
`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, as defined in the Skin rule. SeeSkin form — Components tab — Layouts — Containers. `6.3 US-1586`
`Hidden (Sub)`	For no subheader, but indented body. See Skin form — Components tab — Layouts — Containers. `6.3 US-1586`

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

Optional. If you leave this field blank, the tree grid is always visible. To control its visibility, enter or select one of the following:

The When Name key part of a when condition rule. Click() to review or create the rule.
Simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators, such as .Color="Red". You can combine the expression with a when condition rule or another expression using the && and || operators.

As a best practice, use the Condition Builder to edit this field. Click ( ) to open the tool. See Using the Condition Builder to configure dynamic UI actions.

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 group of layouts with tabbed headers. Only one layout within the group can be displayed at once. The tab group appears in a Tab Group wireframe. Use the group's properties panel to control the appearance of all the tabs in the group. See the topic Tab Group properties panel below.
`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

Optional. Only applies to Collapsible header styles.

Leave blank so that the state of the layout (expanded ( ) or collapsed ( ) when you save the Harness, Section, or Flow Action form becomes the state upon initial runtime presentation.
The When Name key part of a when condition rule. SR-7276 B-25698 BUG-1665 gone? Click() to review or create the rule.
Simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators. For example, enter .Color =="Red"

As a best practice, use the Condition Builder to edit expressions or specify a pair of when condition rules. Click (

) to open the tool. See Using the Condition Builder to configure dynamic UI actions.

Run on Client?

Appears when you enter a simple expression in the Visible When field.

Select to cause evaluation and execution of the condition each time the value of a property stated in the condition changes. If unselected, the expression is evaluated and the condition executed when the form is initially presented and whenever the form is refreshed. V6.3 GRP–37461

By default, controls that allow typing, such as Text Input, are evaluated when the user leaves the field. To re-evaluate conditions as the user types, use the Apply Conditions action with a Keyboard event. See Control Form — Completing the Control tab. 6.3 GRP-42698

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 option speeds up first display of the page.

To enable users to take actions, such as submit, on a work item while other content is still being loaded, configure sections to use defer loaded asynchronous declare pages. See PDN How to configure non-blocking UI using Asynchronous Declare Pages (ADP).6.3 SP1 US-9929

Retrieve Activity Appears when you select Defer Load. Specify the activity that will retrieve the data. As a best practice, create a defer loaded wrapper section with the retrieval activity (instead of having multiple defer loaded sections with wrapper activities.) US-4647

New Tab Group

For Header Type of Tabbed only. Select to remove this tab from the layout group, and add it as a new tab group directly below the original group. Deselecting this property causes the separated tabs to merge back into the original tab group. Deselecting this option causes the separated tabs to merge back into the original tab group.

If this is the only tab in a group, this option is selected by default and cannot be changed.

New Layout

For Header Type of Accordion only. Select to remove this layout from the layout group, and add it as a new group directly below the original group. Deselecting this property causes the separated group to merge back into the original group. Deselecting this option causes the separated group to merge back into the original group.

If this is the only accordion in a group, this option is selected by default and cannot be changed.

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:

Pixels (Fit Content)

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.

Fill (100%)

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.

Pixels (Fixed)

To specify the column widths within the grid exactly as the fixed column width during runtime.
The 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.

Paging

Optional. If the data results comprise more than a single page (approximately 20 rows of data), you may want to specify a traditional Paging format. This option is not available if the data source is a report definition.

The system retrieves a segment, known as a page, containing the number of rows defined in the Items per Page setting, from the total data set on the clipboard. It presents the page navigation controls in a format defined in this option. You can drag and drop rows within a page.
When you select a paging option, the paginate gadget (pyGridPaginator section) is automatically added to the right-most cell in Action Top. You can drag and drop the gadget onto any cell in an action area (do not drop into the repeating area).
If the results produce less than one page, the paginate gadget does not appear at runtime.

The options are:

`None`	No paging (default).
`Page 1 of X`	Presents an editable page number and a total page count. To navigate, users edit the number and press Enter, or use the navigation buttons.
`Page 1,2,3...`	Presents the first group of N links as page 1, the second group as page 2, and so on, where N is the total number of top-level nodes divided by the Items per Page value plus 1 if the total number is not an exact multiple of items per page. For example, if the Items per Page value is 20 and the report contains 207 items, the first page contains items 1 to 20, and the last (11th) page contains the final 7 items. To navigate, users click a number to open a page ( 1, 2, ...) within the range. The display is limited to 10 pages. If there are more than 10 pages, users can click (... ) to advance to the next group.
`Rows 1 - Y`	Presents a range of items (defined in the Items per Page field) in a drop-down list. To navigate, users select a range in the drop-down list or use the navigation buttons.
`First X Results`	Presents the data in either of two page views. The first view is a subset of the data on the clipboard and comprises the top group of items defined by the Items per Page setting. For example, if the setting is 50 and there are 200 items on the clipboard, a label at the top of the list reads "Showing 50 of 200." To view the entire data set (200 in this example), the user clicks the Show All link. This enables a user to drag items at the top of the set and drop them onto the bottom. The other paging options break large data sets into individual pages and do not have this capability. The user can toggle click the link to toggle between the first and total views.

In cases where the data set is large and performance is an issue, you can populate the clipboard incrementally using the Paginate Activity on the Advanced tab.

Items per Page Appears if you select a Paging option. Select the item limit per page (20 is the default). To specify a custom value, select Other and enter a positive integer in the empty field.

Style

Select a style for the repeating area elements (text, borders, backgrounds, and images) as defined in the Skin rule. To modify the styles, open the Styles tab of the Skin rule and select Layouts>Repeat Tree/Grid. 6.3 GRP-46033Specify the skin in your Designer Studio General Preferences panel.

The initial settings are as follows:

Default
Spreadsheet
Transparent

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:

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

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

Paginate Activity

Optional. Appears if you selected a paging option in the Paging field on the General tab. V6.2 GRP-23171 pashm

SmartPrompt Select a custom activity that populates the clipboard from a Page List in a page size you define. Because the activity limits clipboard size, this option is useful when retrieving large amounts of data from an external Web service or database. You can also use this activity to control sorting and filtering behavior.

For guidance on configuring the parameters in your activity, use a copy of the standard template activity pyTemplateAdvancedGridActivity.

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	Select a field value that appears as the column title.
Label For	Indicate the property that appears in this column in the repeating rows.

General tab

Visible When	Optional. If you leave this field blank, the cell is always visible. To control its visibility, enter or select one of the following: The When Name key part of a when condition rule. Click to review or create the rule. Simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators, such as .Color="Red". You can combine the expression with a when condition rule or another expression using the && and \|\| operators. As a best practice, use the Condition Builder to edit this field. Click to open the tool. See Using the Condition Builder to configure dynamic UI actions.
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 () 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	Optional. Type the name of the custom style, for example, `custom_stylename`, that you want to apply to this cell when the user form or flow action form appears in read-write mode. Define custom styles in the Skin rule. See Skin form — Custom.`6.3 US-2759`
Read-Only Style	Optional. Type the name of the custom style, for example, `custom_stylename`, that you want to apply to this cell when the user form or flow action form appears in read-only mode. Define custom styles in the Skin rule. See Skin form — Custom.`6.3 US-2759`
Inline Style	Optional. Enter CSS code for an inline style for a cells in the column. For guided assistance in composing a style definition, click to open the Style Editor. You can select from predefined lists or type a style definition directly, and preview the results.

Select the Tree Grid header in the repeating area and open its properties panel.

You define the data source in the Hierarchy Cell properties panel.

General tab

Edit Mode

The edit mode sets the default presentation and behavior configuration for a repeating grid, determining how users view and edit properties.

By default, each edit mode is configured with grid actions — events and associated actions. The default action for all edit modes is Click to Set Focus. If you do not want a grid to have focus, for example, a display-only grid, delete this grid action.

You can add, delete, or edit grid actions as desired; click magnifying glass next to Edit Mode to configure grid actions. See Completing the Control tab for a description of actions.

When configuring actions in a repeating grid, select the actions from the Handle List Items category. These actions are pre-configured to act upon the rows of the grid. Kavoj- e-mail

You can configure sequential actions based on a single event for a repeating grid; for example, Click to Set Focus and Click to Edit Item. The actions are acted upon in the order specified. You can also set multiple actions based on different events; for example, Click to Set Focus and Double Click to Edit Item.GRP-40085

You can also configure Keyboard actions to enable users to navigate and access items in a repeating grid. For example, you can configure the Up and Down arrows to set focus to the previous and next rows in a grid, and the Enter key to open the selected item. 6.3 GRP-38743

For more information about edit modes, see PDN article 26349 About repeating layout edit modes.

The UI Gallery contains working examples of edit modes and grid actions. To view and interact with examples and review configurations, select > User Interface > UI Gallery and select Tree Grid in the Repeating Layouts group or Row Actions in the Combinations group.

Select one of the following Edit Modes. See Completing the Control tab for a description of actions.

Edit Mode Description Default Grid Actions

Read-Only

The row's data cannot be edited. You can allow the user to display the flow action's fields (read only) by selecting the Show Details option.

If the data source is a Report Definition, this is the default value and cannot be edited.

Event	Action
Click	Set Focus

Read / Write

Editable fields display the data in input boxes.

Event	Action
Click	Set Focus
Keyboard- Enter `6.3 GRP-38743`	Add Item

Inline

The displayed data appears in read-only mode. When the user clicks a row, the editable fields in that row display as editable.

Event	Action
Click	Set Focus
Double Click	Edit Item

Modal Dialog

The displayed data appears in read-only mode. When the user clicks a row the editable fields for the flow action appear in a modal window on top of the data display. When the modal window is dismissed, any edits take effect.

Event	Action
Click	Set Focus
Double Click	Edit Item

Embedded Pane

The displayed data appears in read-only mode. When the user clicks a row, the editable fields for the flow action populate a detail area below the grid. When the user saves the edits or selects another row, the edits are applied.

Event	Action
Click	Set Focus
Click	Edit Item

The system uses existing grid actions to determine whether to set focus to new rows.

When adding a new row, if focus is...	then the system...
configured for the grid	sets focus to the new row
not configured for the grid	does not set focus within the grid

If you want to set focus from within a row in a repeating grid to an editable control outside of the grid, provide the full path to the property, beginning with the parent page, and represent it on the Pages & Classes tab of the layout containing the repeating grid. GRP-40428

For Modal Dialog and Embedded Pane, click magnifying glass next to the field to open the template section used to render the layout. By default, the templates are standard rules .pyGridModalTemplate and .pyGridDetails. To create custom templates, copy these rules into your Applies To class. Do not change the Purpose. V6.2 GRP-19651 pashm

Depending on the mode you select, you will see a different array of the following fields:

Flow Action

SmartPrompt Appears if edit mode is Modal Dialog or Embedded Panel, or Read Only and Show Details is selected. Select or create the flow action that will provide the form for the modal dialog or detail area that appears when the user clicks a row. V6.2 GRP-2025 pashm

Details as read only

Appears if the Edit Mode is Modal Dialog or Embedded Pane. Select to allow the user to view the flow action details in read-only mode, which prevents locking the work item (Work- or Assign- item) when it opens. V6.2 GRP-27520 pashm

Do not select this option if the flow action contains an editable grid. The user will be unable to perform work in it.

Reordering

Select to allow users to move objects higher or lower on the display by dragging and dropping individual rows. Depending on the properties of the objects the rows represent, rows may be moved above or below other rows, or dropped into a row that can receive them to become child entries of that row.

This option is unavailable when the data source is a Report Definition.

Visual indicators give clues about the process: a line appears between two rows in the list if that is where the row you have started dragging will appear if you release it. A row that can receive the row you have selected as a child will change background color. If your mouse cursor is over an area where you cannot drop the row you have selected, an indicator will remind you that the area is not a valid target. If you attempt to drop the row there, the display will remain unchanged.

Column Resizing

Select to allow users to adjust the width of columns on the display by dragging individual columns to the left or right. GRP-38000

Row Resizing

Select to allow users to click a row border and drag it beyond the Height setting in the Row Properties panel.

Row Hover

Select if you want an OnHover style for rows, changing the appearance of a row when the cursor hovers over it. You can set the hover text and background color in the Skin rule.

The UI Gallery landing page contains working examples of Row Hover. To view and interact with examples and review configurations, select Pega button > User Interface > UI Gallery and select Tree in the Repeating Layouts group.V6.2 GRP-19533

Filtering

Select to allow users to show only those rows that match a column value filter. This setting enables filtering for all columns that include a property. You can set filter types or disable filtering for individual columns using the Filtering options in the Column Properties panel. GRP-33092

This option is unavailable if the data source is a Report Definition.

If a column can be filtered, a filter icon ( ) appears on the right side of the column's header cell. The user clicks the icon to display the filter pop-up menu. On the menu, the user selects the checkbox next to each property that will be included. The menus also contain filtering mechanisms suitable for the property types in the column as follows:

Date types ( Date and DateTime) — Define a data range in the From and To fields.
Text — Enter free-form text in the abc field.
Numeric types (Integer, Decimal, and Double) — Define a range by entering numeric values in the greater than and less than fields.

When finished, the user clicks Apply. The filter icon changes to a filter-on icon () indicating that a filter is applied to the column.

You can use the Skin rule to replace the default icons.

Note the following:

— Columns containing images, action controls such as buttons or icons, hidden controls (pxHidden), prompt select controls, and subsections cannot be filtered. V6.2 GRP-28264

— Filtering on Text properties that are obfuscated in edit-mode return results based on unfiltered data. Filtering should be disabled.

— The following property types cannot be filtered:

TextEncrypted
Password
TimeOfDay
Identifier

If the filter does not produce results, a message appears. You can modify the message text in the section pyGridNoResultsMessage. V6.2 GRP-25344 pashm

Show Details

Appears if edit mode is Read Only. Select to allow the user to click a row and display its flow action details beneath the row in read-only mode. The user can expand multiple rows. Enter the flow action in the Flow Action field. V6.2 GRP-2025 pashm

Unavailable if source is Report Definition. Clicking a node opens the Report Viewer.

Expand All

Appears if Show Details is selected. Select to display details for all rows when the user opens the form. V6.2 GRP-2025 pashm

Sorting

Select to allow users to sort the rows on a column in the tree grid. This setting applies to all columns. You can disable sorting for individual columns by clearing the Enable Sorting checkbox in a column's Cell Properties panel. Sorting is not available for columns containing images, or controls such as buttons or links.

Unavailable if source is Report Definition.

A tool tip appears at runtime when the user hovers the mouse pointer over the column header. Clicking the header sorts the rows in the column. When sorted, an icon indicating an ascending () or descending () sort order appears to the right of the header label text. The user can alternate the sort order by clicking the header again. You can use the Skin rule to replace the default icons.

Sorting is performed on all rows in the tree grid. If paging is enabled and the user changes the sort order, the tree grid view returns to the first page.

Fixed Size

Select this option to specify the maximum height and width of the layout. Further fields appear:

Height	Enter a layout height in pixels.
Width	Enter a layout height in pixels.
Freeze Pane	Select an option to govern how the display will behave if the tree and its data are wider and/or taller than the dimensions you have provided. Depending upon the Width option you selected on the Grid Repeat Layout properties panel, the following may display: `None` — As the user scrolls down or to the right to see more data than the dimensions allow for, the header row and the first column (usually a key identifier of the row's contents) move off-screen). `Row Pane` — As the user scrolls down, the header row remains in view to identify the columns being displayed. `Column Pane` — As the user scrolls to the right, the first row of data remains in view to help the user identify what rows of data are being displayed `Both Panes` — As the user scrolls to the right or down, both the header row and the first column of data remain in view.

Open on double-click

or

Open leaf item on double click

Appears if Edit Mode is Read Only or Embedded Pane. Select so that the related work item opens for editing in a work item gadget when the user double-clicks on a row of data in the display. If PRPC cannot find the gadget, it opens the work item in a new tab or new window.

For Report Definitions. Select so that when the user double-clicks a leaf item under a parent node, the item opens rather than the Report Viewer. V6.2 GRP-25625 pashm

Advanced tab

ID	Optional. Provide an identifier for this Tree layout. Start with a letter, have no spaces, and include only alphanumeric characters, dashes, or underscores.
Summary	Describe the data to be displayed.
Refresh on Update	Appears if the Edit Mode is `Modal Dialog`. When checked, the entire layout is refreshed each time data is updated or submitted.
Append Activity	Select or create an activity that runs when the user adds an entry.
Delete Activity	Select or create an activity that runs when the user deletes an entry.
Target for Edit	Appears when edit mode is `Embedded Pane`. Select a custom section in which you want the details to appear. For example, assume you want to display the detail area to the right of the grid instead of below it (default). Create a section (named `gridResults`) containing a two-column layout. Embed the grid in the first column and an empty section in the second column. Enter the name of the empty section in Target for Edit.

Column properties

Select a column in the repeating section. Select the first column to display the Hierarchy Column properties panel. Select other columns to display the Label Column properties panels. The options you see depend upon the type of column.

Width

Specify the column width of this column in pixels. You can also adjust the width of a column directly:

Click a vertical wireframe cell border.
Wait until the pointer shape changes (), then drag the border.

The unlabeled Use at Runtime checkbox to the right of the width field is enabled by default and cannot be edited. This forces the Width value to be used by the browser at runtime, even when data values in this column or in other columns would otherwise cause the browser to present a wider or narrower column. Data values may sometimes wrap or appear truncated.

Enable Sorting

Label Column panel only. Clear the checkbox to disable sorting on this column . This checkbox appears only if the Enable Sorting checkbox is selected on the Tree Grid panel (overrides global setting).

Inline Style

Optional. 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 () to open the Style Editor. You can select from predefined lists or type a style definition directly, and preview the results.

Hierarchy control cell properties

tree hierarchy cell

Select the hierarchy control cell and open its properties panel.

`Source`	Select either a `Property` (default) or a list-type `Report Definition` as the data source. You cannot select a summary-type Report Definition. `V6.2 GRP-23358 RD as tree grid source – pashm`
`List/Group`	If you specified `Property`, select the `Page List` property as the data source.
`Applies To`	If you specified `Report Definition`, select the Applies To key part of the rule.
`Report Definition`	If you specified `Report Definition`, a list contains summary-type reports. Select the Report Name key part of the rule. Optional. Click () in the properties panel to update parameter values that you want to pass from the grid to the Report Definition. Values are passed when the data is loaded, and when the report definition refreshed due to user actions. `V6.2 sp2 GRP-29623` See About Report Definitions.

General tab

Show +/- Icon	Select one of the available values. If you select `Other Condition`, the Condition field appears where you can specify or select the When rule that governs whether the row is to be visible.
Icon	Specify the image to appear in the hierarchy control cell if you wish to replace the default image.

Advanced tab

Defer Load Activity	In situations where loading all the data available might take a significant amount of time, you may choose to load only the data required by the current display. Select or specify in this field the activity to call to get further data when it is required.
Right Click	Optional: Specify a the Name key part of a navigation rule that defines a context menu to appear when the user right-clicks a row in the grid. Such a menu can offer standard actions such as "Add After", "Delete", and so on. See About Navigation rules and PDN article 26111 How to create context menus for grid layouts using navigation rules.
Width	Specify the width of the column in pixels. Provides the same control as the Width setting in the Column properties panel.
Height	Specify the height of the cell in pixels. Reducing the height can make the tree grid more vertically compact at run time. Provides the same control as the Height setting in the Row properties panel.
Inline Style	Open the Style Editor panel for this cell to override the stylesheet settings with local values.

Row properties

tree repeating row

Select either row in the repeating area and open its properties panel.

Height

Optional. Enter a positive number for the height in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed height.) You can also adjust the height of a row directly:

Click a horizontal wireframe cell border.
Wait until the pointer shape changes (), then drag the border.

The unlabeled Use at Runtime checkbox to the right of the width field is enabled by default and cannot be edited. This setting forces the Height value to be used by the browser at runtime, even when data values in this column or in other cells would otherwise cause the browser to present a taller or shorter column.

Inline Style

Open the Style Editor panel for this cell to override the stylesheet settings with local values.

Make Header?

Select to display all the cell values in the row with the same style that the column heading uses. This is an alternative to individually selecting the Use Heading Styles checkbox for each column. This option is unchecked by default.

Column header properties

Select the header cell in the repeating area and open its properties panel.

Value	Enter the title for the column.
Label For	Select from the data source the field that will be rendered in the cells of this column. Normally this is the label or title of the item.

General tab

Visible	Select one of the options presented. The default is `Always`.
Condition	If you selected `Other Condition` for the Visible field, complete this field. The When Name key part of a when condition rule. Click () to review or create the rule. Simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators, such as .Color="Red". You can combine the expression with a when condition rule or another expression using the && and \|\| operators. As a best practice, use the Condition Builder to edit this field. Click ( ) to open the tool. See Using the Condition Builder to configure dynamic UI actions
Required	Select to make the values in this column required.
Wrap Text	Select to force the text in this column to wrap to additional lines if it is longer than the width of the column.
Read Only	Select to make the cells in this column read-only. If you select it, a field appears where you can specify a When rule to govern when the cells in this column are to be read-only.

Advanced tab

Width	Specify the width of the column in pixels. Provides the same control as the Width setting in the Column properties panel.
Height	Specify the height of the cell in pixels. Provides the same control as the Height setting in the Row properties panel.
Read-Write Style	Optional. Type the name of the custom style, for example, `custom_stylename`, that you want to apply to this cell when the user form or flow action form appears in read-write mode. Define custom styles in the Skin rule. See Skin form — Custom.`6.3 US-2759`
Read-Only Style	Optional. Type the name of the custom style, for example, `custom_stylename`, that you want to apply to this cell when the user form or flow action form appears in read-only mode. Define custom styles in the Skin rule. See Skin form — Custom.`6.3 US-2759`
Inline Style	Open the Style Editor panel for this cell to override the stylesheet settings with local values.

Repeating cell properties

Select a data cell in the repeating area and open its properties panel.

Property

SmartPrompt Select a Single Value property. Typically, this is from within data source's embedded page property. Alternatively, you can drag a property name from the properties visible in the Application Explorer onto the cell.

If the source is a summary type Report Definition, the system creates cells and populates each using Column Name properties defined in the rule. If there are joins in the report, property names appear as joinname.PropertyName.V6.2 GRP-23358 RD as source – pashm

This field does not appear if the value in the Control field contains an Action mode control such as pxButton.

Control

Select a control to format the value in this cell. If left blank, the property uses the control (if any) in the Control field on the property form's SmartPrompt

General tab.

Many controls on the Basic and Advanced groups are associated with default controls, which appear in this field when you drag and drop a control into the cell. For example, the Button control populates the field with pxButton, the Text Area control with pxTextArea, and so on. updated 10/20/10 pashm

Behavior

Click the magnifying glass beside this field to display the Client Event Editor, where you can specify formatting conditions and actions for this field. For general information on this capability, see Harness and Section forms Help — Client Event Editor.

This field does not appear if the value in the Control field contains an Action mode control such as pxButton.

General tab

Visible	Select one of the options presented. The default is `Always`.
Condition	If you selected `Other Condition` for the Visible field, complete this field. The When Name key part of a when condition rule. Click () to review or create the rule. Simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators, such as .Color="Red". You can combine the expression with a when condition rule or another expression using the && and \|\| operators. As a best practice, use the Condition Builder to edit this field. Click ) to open the tool. See Using the Condition Builder to configure dynamic UI actions
Required	Select to make this a required field if the user adds data to the display.
Wrap Text	Select to force the text in this column to wrap to additional lines if it is longer than the width of the column.
Read Only	Selected by default, which 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 width of the column in pixels. Provides the same control as the Width setting in the Column properties panel.
Height	Specify the height of the cell in pixels. Provides the same control as the Height setting in the Row properties panel.
Default Value	Specify a default value for this field. Click the magnifying glass beside it 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	Optional. Type the name of the custom style, for example, `custom_stylename`, that you want to apply to this cell when the user form or flow action form appears in read-write mode. Define custom styles in the Skin rule. See Skin form — Custom.`6.3 US-2759`
Read-Only Style	Optional. Type the name of the custom style, for example, `custom_stylename`, that you want to apply to this cell when the user form or flow action form appears in read-only mode. Define custom styles in the Skin rule. See Skin form — Custom.`6.3 US-2759`
Inline Style	Open the Style Editor panel for this cell to override the stylesheet settings with local values.

The delete icon appears at the right of the repeating row in this area, to indicate how and where it appears at runtime. Do not use it to attempt to remove cells or rows while editing the layout.

The Tree Grid layout has two action areas, one at the top and one at the bottom of the display.

You can use one or both. If you use both, configure each action area separately.

Select Action Top or Action Bottom, then display the properties panel. Select a column header and open its properties panel.

Visible Select one of the options presented. The default is Always.

Condition

If you selected Other Condition for the Visible field, complete this field.

The When Name key part of a when condition rule. Click () to review or create the rule.
Simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators, such as .Color="Red". You can combine the expression with a when condition rule or another expression using the && and || operators.

As a best practice, use the Condition Builder to edit this field. Click ) to open the tool. See Using the Condition Builder to configure dynamic UI actions

General tab

Not used.

Advanced tab

ID	Optional: Provide an identifier for this tree. Start with a letter, use no spaces, and include only alphanumeric characters, dashes, or underscores.

Column properties

Select a column in one of the action areas and open its properties panel.

Width	Specify the width of this column. Select the checkbox to the right of the field to lock the width to the value you have specified. Clear the Use at Runtime checkbox (unlabeled) next to the width field to allow the browser at runtime to determine the width of this column based on the size of the column contents and the size of other columns. The width may vary from use to use depending on the contents of this cell and other cells. (When cleared, the generated HTML for this column includes a <TD> element with no WIDTH= attribute.) The Width value is used as you view the rule form, but not at runtime. For example, clear this checkbox if the cell is to contain a section that may be wide in some situations and narrow in others. Select the Use at Runtime checkbox to force the Width value to be used by the browser at runtime, even when data values in this column or in other columns would otherwise cause the browser to present a wider or narrower column. If checked, data values may sometimes wrap or appear truncated.
Inline Style	Optional: 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 () to open the Style Editor. You can select from predefined lists or type a style definition directly, and preview the results.
Filtering	Appears if the Filtering checkbox is selected on the Repeat Grid panel. Select a filtering option for this column: `Auto` — displays a checkbox for each unique value and the Search or Date Range fields, depending upon the column data type. This is the default. `Range/Search` — displays only the Search or Date Range fields, depending upon the column data type. Use this option to enable Search or Date Range on columns in which the values are unique, for example, a description. `None` — no filtering is available on this column.`GRP-33092`
Enable Sorting	Appears and selected by default if Sorting in the Tree Grid properties panel is selected. Clear the checkbox to disable sorting on this column.

Row properties

Select the row in the top or bottom action area and open its properties panel.

Height

Enter a positive number for the height in pixels of this cell.

Clear the Use at Runtime checkbox (next to the height field and (unlabeled) to allow the browser at runtime to determine the height of this row based on the size of the row contents and the size of other rows. The height may vary from use to use depending on the contents of this cell and other cells. (When cleared, the generated HTML for this column includes a <TD> element with no HEIGHT= attribute.) The Height value is used as you update the rule, but not at runtime.

For example, clear this checkbox if the cell is to contain a section that may be tall in some situations and short in others.

Select the Use at Runtime checkbox to force the Height value to be used by the browser at runtime, even when data values in this column or in other cells would otherwise cause the browser to present a taller or shorter column.

Inline Style

Optional. 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 () to open the Style Editor. You can select from predefined lists or type a style definition directly, and preview the results.

Make Header?

Select to display all the cell values in the row with the same style that the column heading uses. This is an alternative to individually selecting the Use Heading Styles checkbox for each column. This option is unchecked by default.

Action cell properties

Add a control, property, or other section that is appropriate to the display and function of your data. Configure the section's properties by selecting it and then displaying the properties panel. For buttons, see Section and Flow Action forms — Adding a Button Control.

When you select a Header Style of Tabbed, the layout appears in a Tab Group wireframe. Select it to make it active and click the magnifying glass icon () in the header to open the Tab Group properties panel.

Complete the top field and General tab. There are no settings on the Advanced tab.

Top field

Field

Description

Format

Select the format you want to apply to the tabs in the group. To configure the format's appearance, access the Components tab in the Skin and then select Tab in the Layouts area.

Standard — Default format applied to all tab groups.
Sub — Format suitable for sub-tabs.
Other — A custom style that you create in the Skin rule. When you select this option, enter the style name in the Style field.

See Skin form — Components tab — Layouts — Tabs. 6.3 US-1586

General tab

Field	Description
Tab Position	Select the placement of the tabs at runtime: `Top` `Bottom` `Left` `Right` If you select `Left` or `Right`, specify the horizontal or vertical orientation of the tabs in the Tab Orientation field
Tab Orientation	If you selected a left or right Tab Position, select to display tabs horizontally or vertically. Horizontal is the default. If you select vertical orientation, the tab title is rotated based on the tab position, left or right.
Stretch Tabs	Select to stretch the horizontally or vertically to fit the available space. If the Tab Position is Top or Bottom, tabs stretch horizontally; if the Tab Position is `Left` or Right, the tabs stretch vertically.

Harness and Section formsAdding a Tree Grid layout

Start with the data

Start with the layout

How to use the properties panels

Field

Description

Group/Selection

Description

Default

Header

SubHeader

Tree Grid title cell properties

Column properties

Hierarchy control cell properties

Row properties

Column header properties

Repeating cell properties

Column properties

Row properties

Action cell properties

Field

Description

Field

Description

Harness and Section forms
Adding a Tree Grid layout