Harness, Section, and Flow Action forms
Adding a Tree layout

You can quickly add a 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 you want to use in your layout and drag it to your section.
3. Drop the rule above or below the default layout. In the pop-up dialog that appears (does not appear for Report Definition), select Tree 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 ( ) at the right end of the Layout group () and select Layout ().
3. Click and drag the layout onto 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 Tree as the repeat type.
   3. Click OK.
   4. Complete the configuration steps described below.
5. Delete any default layout you do not need.
6. Complete the configuration steps described in this topic.

To delete a Tree 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 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:

• 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 are you can place buttons or other controls linked to actions such as "add" or "refresh" See Tree, Grid and Tree Grid layouts - Adding a button.
• 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 left 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 (such as tasks within task groups). The right column contains the repeating data.
  
  You can specify what field of the data source to include in the column, or configure the data's appearance.

Select the Tree 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 six 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.
Title	Optional. Provide a title that appears in the layout header.
Visible When	Select or create a When rule to govern the visibility of the display. If you leave this field blank, the grid is always visible.
HTML	This field appears when you select the Custom format. Identify the second key part of an HTML rule that defines the display of the header contents.

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.
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
Tabbed	Creates a new Tab Group 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.

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

Expand When	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 grid is displayed.
Defer Load checkbox	This field appears for Collapsible, Tabbed and Accordion values of the Header Type. Select to postpone, at runtime, the loading of the contents of this layout from the server until the user clicks to make the body visible This speeds up first display of the page.
Retrieve Activity	This field appears when you select Defer Load. Select the activity that will retrieve the data.
New Tab Group checkbox	For Header Type of Tabbed only. Select to present this tab as the first in a distinct group of tabs, identified by indenting and optionally styles.
New Layout? checkbox	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 the individual columns within the layout (action and repeating areas) are set as a percentage or in pixel values. Use the options as follows: px To set minimum column widths within the layout during runtime. A column expands if the content exceeds its minimum width. % To have column widths measured as 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-fixed To specify the column widths within the layout 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.

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 Gallery 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	This field 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.

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

You define the List/Group data source in the Hierarchy Cell properties panel.

General tab

Edit Mode	Choose from the displayed options: Read-Only The displayed data cannot be edited Read / Write Fields that are editable display as editable Inline The displayed data appears as in read-only mode. However, when you double-click a row the editable fields in that row display as editable. Modal Dialog The displayed data appears as in read-only mode. When you double-click a row the editable fields for that row appear in a modal window on top of the data display. When you dismiss the modal window, any edits you have made take effect.
Depending on the mode you select, you will see a different array of the following fields:
Flow Action	If you select Modal Dialog mode, the Flow Action field appears. Select or create the flow action that will provide the form for the modal dialog that appears when the user clicks on a row to edit it.
Allow Reordering checkbox	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. 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.
Enable Sorting checkbox	Select to allow users to sort on any column in the tree. By default, every column is sorted. To disable, clear the checkbox. 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 Value Lists, Page Groups, images, or controls. At runtime, a tool tip appears when the user hovers the cursor over the column header. The user can alternate the sort order (ascending/descending) by  clicking the header. Sorting is performed on all rows in the tree. If paging is enabled and the user changes the sort order, the tree view returns to the first page.
Fixed Size checkbox	Select this option to specify the maximum height and width of the layout. This checkbox appears only if you specified a Width of px-fixed on the Tree Layout properties panel. Further fields appear: Height Provide the height of the display in pixels. Width Provide the width of the display 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. The options are: 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 checkbox	Appears if the Edit Mode is Read Only. If this checkbox is checked, the related work object opens for editing in a work object gadget when the user double-clicks on a row of data in the display. If Process Commander cannot find the gadget, it opens the work object in a new tab or new window.

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 checkbox	Appears if the Edit Mode is Modal Dialog. If this checkbox is checked, xxxxxxxxxxxxxxxxxxxxxxx
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.

Column properties

Select a column in the repeating section. Select the first column to display the Hierarchy Column properties panel. Select the second column to display the Label Column properties panel. 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 panel.
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.
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.

Hierarchy control cell properties

Select the hierarchy control cell and open its properties panel.

List/Group

Identify the Value List or Page List property as the data source.

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 Pega Developer Network article PRKB-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. Provides the same control as the Height setting in the Row properties panel.
Inline Style	Use this field to specify locally display values for this cell.
Use Heading Styles checkbox	Select this option to use the styles used in the heading row.

Row properties

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? checkbox	Select it 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 this 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 available values. If you select Other Condition, a field appears where you can specify or select the When rule that checks whether the column is to be visible.
Required checkbox	Check to make the values in this column required.
Wrap Text checkbox	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 checkbox	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	Displays the stylesheet settings for this cell when editing is enabled.
Read-Only Style	Displays the stylesheet settings for this cell when editing is disabled.
Inline Style	Open the Style Editor panel for this cell to override the stylesheet settings with local values.
Use Heading Styles checkbox	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.

Repeating cell properties

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

Property	Identify the property in the data source this column displays.
Control	To display the value in this cell using a Control rule (such as a checkbox for a Boolean value), select the rule to use.
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. See Implementing dynamic form actions and the Client Event Editor.

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 checkbox	Select this option to make this a required field if the user adds data to the display.
Wrap Text checkbox	Select this option to force the text in this column to wrap to additional lines if it is longer than the width of the column.
Read Only checkbox	This option is selected by default, 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 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	Displays the stylesheet settings for this cell when editing is enabled.
Read-Only Style	Displays the stylesheet settings for this cell when editing is disabled.
Inline Style	Open the Style Editor panel for this cell to override the stylesheet settings with local values.
Use Heading Styles checkbox	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.

The Tree 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 When:

Optional. If the action area is only visible under certain circumstances, select or create a when rule.

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 the top or bottom action area 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 rule 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	Optionally, 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.
Use Heading Styles checkbox	Select this option to display the cell values with the same style as the column heading uses. This option changes the cell HTML element from <TD> to <TH>, with a resulting style change).

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 rule 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	Optionally, 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? checkbox	Select it 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

Drag a button into an action cell a button, icon, smart prompt field, paging gadget, or any other section rule that is appropriate to the display and function of your data. Configure the section rule's properties by selecting it and then displaying the properties panel. For buttons, see Tree, Grid, and Tree Grid layouts — Adding a button.

The Tree layout shares options with the TreeGrid and Grid layouts. The Branding wizard presents these options; you can have one set of options apply to all three layout types, or specify options for each layout separately.