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 — Borders tab

Updated on April 5, 2022

Styles that you define here apply to borders of grid, tree grid, and tree grid layouts.

  1. grids
  2. Rows
  3. Headers
  4. Skin form — Components tab — Layouts — Trees and tables — Borders tab
  5. Skin form — Components tab — Layouts — Trees and tables - Behaviors tab
  6. Skin form — Components tab — Layouts — Trees and tables - Actions Layout tab

For the following formats, as well as custom formats, specify Table Border and Cell Border styles:

  • Default
  • Spreadsheet
  • Transparent

A preview of the currently selected format displays to the right. You can also preview formats by selecting Actions > Launch in the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview. In the Skin Preview, click the Grids tab. Select the format that you want to preview: Default, Spreadsheet, Transparent, or a custom format.

Table border

Use default border for this grid formatSelect this check box to use the default border specified in the Default border area on the General tab.
Use mixin

Under Mixin overrides, you can specify the Top , Left , Right , or Bottom border as none, solid, dashed, or dotted, rather than inheriting the style from the selected mixin.

Specify styles Select this option and then select or clear Apply to all sides to define a custom border:

You can specify a custom border by selecting or clearing the Apply to all sides check box:

  • When selected, you can choose the same border style, pixel width, and color for the top, right, bottom, and left borders.
  • When cleared, you can choose a border style, pixel width, and color for the top, right, bottom, and left borders individually.

The following border styles are available:

  • none
  • solid
  • dashed
  • dotted

Cell borders

Use default border for this grid formatSelect this check box to use the default border specified in the Default border area on the General tab.
Use mixin

Under Mixin overrides, you can specify the Top , Left , Right , or Bottom border as none, solid, dashed, or dotted, rather than inheriting the style from the selected mixin.

Specify styles Select this option and then select or clear Apply to all sides to define a custom border:

You can specify a custom border by selecting or clearing the Apply to all sides check box:

  • When selected, you can choose the same border style, pixel width, and color for the top, right, bottom, and left borders.
  • When cleared, you can choose a border style, pixel width, and color for the top, right, bottom, and left borders individually.

The following border styles are available:

  • none
  • solid
  • dashed
  • dotted

Styling grid borders

Use the following table to help you decide how to set table borders and cell borders.

If your grid has...in the Table border...and in the Cell borders...
A single cellSelect: same for all sides .Set the top, left, right, and bottom boxes to none .
Rows onlySpecify the left, right, and bottom boxes. Set the top box to none .Specify the top box. Set the left, right, and bottom boxes to none .
Columns onlySpecify the top, right, and bottom boxes. Set the left box to none .Specify the left box. Set the top, right, and bottom boxes to none .
Row and columnsSpecify the right and bottom boxes. Set the top and left boxes to none .Specify the top and left boxes. Se t the right and bottom boxes to none .

You can delete styles that you create; click the Delete icon.

Skin rules

  • Create a custom grid format

    You can create a new custom format or copy an existing one.

  • Applying a custom grid format
  • 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 Skin form — Components tab — Layouts — Trees and tables - General tab
  • Next topic Creating a custom grid format

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