Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Skin form — Components tab — Layouts — Trees and tables - Rows tab

Updated on April 5, 2022

Styles that you set on this tab apply to the rows in tables, tree tables, and tree layouts.

Select Enable row banding options (zebra striping) to specify alternating text or background colors for odd and even rows.

Only text color is used when using default grid text or mixin. Only background color is used when using default grid background or mixin.

A preview of the currently selected format displays to the right. You can also preview formats by selecting ActionsLaunch on the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview.

Enable row banding options (zebra striping)Select to enable alternating odd and even text and background colors. Without selecting this option, you can apply formatting to the rows, the total row, the tree icons, and the expand pane icons. After you select this check box, you can select different styling for the odd and even rows.

Rows: All, Odd, Even, or Total

Set the Text and Background color for rows: all (without banding), odd and even (with banding) or total row.

Text

Use the default text for the grid format or choose the mixin style or a specific style.

To set the row handle image, select the Headers tab.

Use mixin Select Use mixin to apply the skin's standard active mixin. You can then override individual font attributes by clicking Add Mixin Overrides . Select Specify styles to define all your own font attributes independently of the mixin.

The Mixin field displays the name and a preview of the currently selected mixin. Click the menu icon to select a different mixin from the list.

Specify styles Select to define a custom style for the selected format and specify a Color for the text. Enter a hexadecimal value (such as #3d3d3d) or click the box next to the field to Color Picker.
  • Additional styles — Apply additional styles, specific to styling the text for this element, by specifying a CSS attribute and value. You must specify a CSS attribute that is related to text styles. Click Add additional styles to define another CSS attribute-value pair.

Background

Applies to the background color of odd, even, and total rows.

Use default background for this grid format Select to use the default background color specified in the Default background area on the General tab.
Use mixinSelect to use a mixin to define the background color. Mixin displays the name and a preview of the currently selected mixin. Click the menu icon to select a different mixin from the list.
Specify styles Select to specify a Color . The default is transparent (no fill). Enter a value using CSS hex notation (such as #3d3d3d) or click the box next to the field to Color Picker.
  • Additional styles — Add additional styles, specific to styling the background for this element, by specifying a CSS Attribute and Value. Specify only CSS related to background styles. Click Add additional styles to define another CSS attribute-value pair. Click the Delete icon to remove an additional style.

Tree icons and Expand Pane icons

Specify Expand and Collapse images for:

  • Tree icons — These icons are handles for expanding and collapsing row details.
  • Expand Pane icons — These icons are handles for expanding and collapsing a pane.
Expand

Collapse

To search for an image, click the Gear icon to open the Image Catalog tool. Enter any portion of a file name (relative path, file name, or extension) in the Search box, and click Find. If you can’t find the image, make sure it is in the webwb directory.

  • grid

    Help users access and compare data with table layouts. Use tables in your applications as a flexible basis for users to process large amounts of information. For example, tables in a price comparison application can help users efficiently identify the best offer.

  • tree grid

    A tree layout allows users to view, navigate, and access the properties in pages in an embedded Page List property. The user can quickly expand and collapse branches of the tree to find entries of current interest.

  • Creating a hierarchical table layout

    Help users access and compare nested data with a Hierarchical table layout. Hierarchical table layouts support expandable rows, which can provide you with a more compact view of your data.

  • Component styles (custom style formats)

    Use the Component styles tab to define the presentation of components by creating custom style formats. After you define style formats, reference them on property panes for sections, harnesses, and controls.

  • Previous topic Creating custom table and tree table formats
  • Next topic Skin form — Components tab — Layouts — Trees and tables - General tab

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us