Harness, Section, and Flow Action forms
Adding a Tree layout
|
|
A Tree layout allow users to view, navigate, and access the properties in pages in an embedded Page List or Page Group property. The user can quickly expand and collapse branches of the tree to find entries off current interest.
The layout can display a custom skin; is cross-browser compatible; can be configured to be editable and localizable. Depending on the settings of the control, the user may then be able to perform express actions such as "Approve", or open the data object represented by a branch for further review or editing. PROJ-185 Sequoia.
You can quickly add a grid layout to a section in either of two ways:
Adding a Tree layoutPage List or Page Group property you want to use in your layout and drag it to your section. Tree as the layout type.
) at the right
end of the Layout group (
) and
select Layout (
). Tree as the repeat type.To delete a Tree layout, select the layout and click the
Delete Row button (
). Do not use the Delete Cell button for this
action.
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:
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:
), 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.
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 Using the Branding wizard, you can review or revise the styles (colors, fonts, padding and margins) associated with each header or subheader format.
|
||||||||||||||||||||||||||
| 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 | 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 |
Appears when you select Defer Load. Select the activity that will retrieve the data. |
||||||
| New Tab Group | 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? | 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:
|
||||||
| Style | Select a style for previewing the 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:
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 |
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:
|
| 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 |
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. |
If you select the Standard or Standard (sub) formats, a cell appears to the right of the tree's title.
Open the properties panel to 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 | 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 to make this a required field if the user adds data to the display. |
| Wrap Text | Select so that long text entries in this field appear over multiple lines, rather than requiring a scrollbar. |
| Read Only | Select 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 ( ) 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 | 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 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. |
Select the Tree header in the repeating area and open the Tree properties panel.
You define the data source in the Hierarchy Cell properties panel.
General tab
| Edit Mode | Choose from the displayed options:
Modal Dialog and Embedded Pane, click the pencil icon  next to the field to open the template section rule used to render the layout. By default, the templates are standard rules .pyGridModalTemplate and .pyGridDetails , respectively. 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 |
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 |
||||||||||
| 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.
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. |
||||||||||
| Row Resizing | Appears if px-fixed is selected in the Width field on the Tree Layout properties panel. Check to allow users to click a row border and drag it beyond the Height setting in the Row Properties panel. V6.2 GRP-19650 pashm |
||||||||||
| Sorting | Select to allow users to sort on a column in the 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 Value Lists, Page Groups, images, or controls.
If enabled, a tool tip appears at runtime when the user hovers the mouse pointer over the column header. The user can alternate the sort order (ascending/descending) by clicking the header. Icons indicating ascending sort (
|
||||||||||
| Filtering | Select to allow users to show only those rows that match a column value filter. This setting applies to all columns (except as noted below). You can disable filtering for individual columns using the Enable Filtering checkbox in the Column Properties panel. V6.2 GRP-22524 pashm If a column can be filtered, a filter icon (
When finished, the user clicks Apply. The filter icon changes to a filter-on icon ( You can use the Branding Wizard to replace the default icons. See Branding wizard — Layouts.
|
||||||||||
| 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 |
||||||||||
| 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 | ||||||||||
| Fixed Size | Appears if px-fixed is selected in the Width field on the Tree Layout properties panel. Select to specify the maximum height and width of the layout. Further fields appear:
|
||||||||||
| Open on double-click | Appears if the Edit Mode is Read Only or Embedded Pane. When 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 | Appears if 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 to display the details. For example, assume you want the detail area to appear to the left of a tree instead of below (default). Create a section (named gridResults) containing a two-column layout with the grid embedded in the second column and an empty section in the first column. Enter the name of the empty section |
There are two columns 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:
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. Appears and is selected if Sorting is selected on the Tree properties panel. Clear the checkbox to disable sorting on this 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. |
| Use Heading Styles | Select 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. |
| Enable Filtering | Label Column panel only. Appears and is selected if Filtering is selected on the Tree properties panel. Clear the checkbox to disable filtering on this column. |
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 | Optional: 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 ( |
| Use Heading Styles | Select to use the styles used in the heading 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:
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. |
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 | 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 | 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 | Select 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. |
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 | Select a control rule to format the value in this cell. If left blank, the property uses the control rule (if any) in the Control field on the property rule form's General tab.
Many controls on the Basic and Advanced groups are associated with default control rules, 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 next to 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 | 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 | 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 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. |
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 | 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 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). |
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 | 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. |
Add a control, property, or 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 Section and Flow Action forms — Adding a Button Control.
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.
Optional. If the Header Type is 
) and descending sort (
) appear to the right of the header label. You can use the Branding Wizard to replace the default icons. See 
) appears on the right side of the column's header cell. The user clicks the button to display the filter pop-up menu. On the menu, the user selects the checkbox next to each property to include. The menus also contain filtering mechanisms suitable for the property types in the column as follows: 
) indicating that a filter is applied to the column. 
Columns containing buttons, icons, and subsections cannot be filtered. In addition, the following property types cannot be filtered:
), then drag the border. 
), then drag the border.