Creating a navigational tree layout

If you select Report Definition as data source, you can configure a dynamic grid.

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.

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.

• Always : The tree is always visible.

• Condition (expression) : The tree is visible under the specified condition. In the field that is displayed, select a condition or click the Gear icon to open the Condition Builder.

  Note: You can define a 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.
• Condition (when) : The tree is visible under the specified condition. In the field that is displayed, select a when rule. Click the Gear icon to create a new when condition or review an existing when condition.

• Always : The row is always visible.
• Condition (expression) : The row is visible under the specified condition. In the field that is displayed, select a condition or click the Gear icon to open the Condition Builder.
• Condition (when) : The row is visible under the specified condition. In the field that is displayed, select a when rule. Click the Gear icon to create a new when condition or review an existing when condition.

• Never : The row is never refreshed.
• Condition (expression) : The row is refreshed under the specified condition. In the field that is displayed, select a condition or click the Gear icon to open the Condition Builder.

• Always : The grid header is always visible.

• Condition (expression) : The grid header refreshes under the specified condition. In the field that is displayed, select a condition or click the Gear icon to open the Condition Builder.

  Note: You can define a 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.
• Condition (when rule) : The grid header refreshes under the specified condition. In the field that is displayed, select a when rule. Click the Gear icon to create a new when condition or review an existing when condition.

• Always : The grid footer is always visible.

• Condition (expression) : The grid footer refreshes under the specified condition. In the field that is displayed, select a condition or click the Gear icon to open the Condition Builder.

• Condition (when rule) : the grid footer refreshes under the specified condition. In the field that is displayed, select a when rule. Click the Gear icon to create a new when condition or review an existing when condition.

Select one of the following row editing options, each of which are described below: None , Inline , Master-detail .

Default behaviors, configured on the Actions tab,are defined for Inline and Master-detail row editing formats. See Control form - Actions tab tab for more information.

Click row to edit : When the user double-clicks a row, the editable fields in that row display as editable.

Rows always editable : Editable fields display the data in input boxes.

• Modal dialog : 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, the edits are applied.
• Expandable rows : When the user clicks a row, the flow action's editable fields populate a detail area below the selected row. When the user saves the edits or selects another row, the edits are applied.
• Embedded elsewhere : When the user clicks a row, 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.

Click Open template to open the section used to render the layout. By default, the templates are standard rules .pyGridModalTemplate, .pyGridDetails, and .pyGridRowDetails, respectively. To create custom templates, copy these rules into your Applies To class. Do not change the Purpose .

in the skin, select Other. Press the down arrow in the field that displays to select the template that you want to use.

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.

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.

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

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 grid. If Paging is enabled and the user changes the sort order, the grid view returns to the first page.

Select to allow users to show only those rows that match column value filters. 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.

If a column can be filtered, the 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 check box next to each property to include. Users can select more than one filter criteria and the grid will filter using all selected criteria.

Filtering mechanisms also appear in the menus for data sourced from:

• static report definition

• dynamic report definition

• virtual report definition

• property

• data page

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.

• Columns containing images, most action controls such as buttons or icons, hidden controls ( pxHidden ), prompt select controls, and subsections cannot be filtered. Columns can include links.
• Filtering on Text properties that are obfuscated in edit-mode return results based on unfiltered data. Filtering should be disabled.
• For date types, leaving a From or To field blank means to include everything preceding or following the single limit. For example, if you enter From 12/15/2011 and leave To blank, all dates on or after 12/15/2011 are included.
• For numeric types, leaving a greater than or less than field blank means to include everything preceding or following the single limit. For example, if you enter less than 500 and leave greater than blank, all numbers less than 500 are included.
• Null and not null values can be entered in the filter panel in the Report Viewer. An error message displays if the user searches for a date range by entering a From date that is later than the To date in the Data time column filter panel. An error message displays when the value entered in Greater than or equal to is greater than Less than or equal to.
• The following property types cannot be filtered:
  • TextEncrypted
  • Password
  • TimeOfDay
  • Identifier
• Entering a From or To range or search text overrides check box selections; these selections are not included in the filter.

Unavailable if source is 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 pointer 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.

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

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 the Gear icon next to Edit Mode to configure grid actions. See Completing the Control tab for a description of actions.

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.

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.

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

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.

For Modal Dialog and Embedded Pane, click the Open icon 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.

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

Visual indicators provide 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 pointer 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.

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 and descending sort appear to the right of the header label. You can use the Skin rule to replace the default icons.

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.

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 check box next to each property to include. 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.

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

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

The unlabeled Use at Runtime check box 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.

• Auto — displays a check box 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.

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

The unlabeled Use at Runtime check box 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 run time, even when data values in this column or in other cells would otherwise cause the browser to present a taller or shorter column.

• The When Name key part of a when condition rule. Click the Open icon 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 the Gear icon to open the tool. See Using the Condition Builder to configure dynamic UI actions.

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.

• The When Name key part of a when condition rule. Click the Open icon 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 the Gear icon to open the tool.

Clear the Set width during execution check box (unlabeled) next to the width field to allow the browser at run time 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 run time.

For example, clear this check box if the cell is to contain a section that may be wide in some situations and narrow in others.

Select the Set width during execution check box to force the Width value to be used by the browser at run time, 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.

Clear the Set height during execution check box (next to the height field and (unlabeled) to allow the browser at run time 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 run time.

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

Select the Set height during execution check box to force the Height value to be used by the browser at run time, even when data values in this column or in other cells would otherwise cause the browser to present a taller or shorter column.

• Top
• Bottom
• Left
• Right

If you select Left or Right, specify the horizontal or vertical orientation of the tabs in the Tab Orientation field