Skin form — Components tab — Layouts — Trees and tables - General tab
These styles apply to the column and row headers in a table, tree, or tree table layout. You can specify text, background, and border styling, as well as icons that indicate column sorting, filtering, and row handles.
A preview of the currently selected format displays to the right. You can also preview formats by clicking in the toolbar and then choosing one of the following options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, or Skin Preview.
| Use same formatting for column and row header | Applies the settings to column and row headers. Clear this check box if you want define different styles for row and column headers. Additional fields, Text, Border, and Background appear. |
Column, row, and category headings
Set the text, border, and background for the column, row, and category headings.
Text
| Use default text for this format | Select to use the default text specified in the Default text area on the General tab. See |
| Use mixin |
|
| Specify styles |
Select to define a custom style for text in the action area header.
|
Borders
Applies to the bottom border of the header.
| Use default border for this grid format | Select to use the default border specified in the Default text area on the General tab. |
| Use mixin | If desired, 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 | You can specify a custom border by selecting or clearing the Apply to all sides check box:
The following border styles are available:
|
Background
Applies to the column header. Also applies to the first column on the left in the Default grid format.
The image in the first column on the left is the Row Handle Image specified in the Headers area on the Rows tab.
| Use default background for this grid format | Select to use the default background specified in the Default text 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 check box to define a custom background:
Select the background Type:
|
Column headings focus
You can set text, border, and background options to bring focus to a table column heading (also known as a grid heading).
- Text – Use the default text for this format, use a mixin, or specify the styling by selecting a font, font size, fornt weight, and so on.
- Border – Use the default border for this format, use a mixin, or specify the styling by selecting which sides have borders and selecting the border style.
- Background – Use the default background for this format, use a mixin, or specify the styling by selecting the background type and color.
For detailed guidance, see the option descriptions in the preceding section, Column and row headings.
Icon: Sorting
Indicate the current sort state of the column to the user. The user sees these icons only if sorting is enabled (the Sorting check box is selected) in the layout's repeating area Cell Properties panel.
|
Ascending
Descending |
Enter the location of the file, including the relative path. For example,
images/AlphaCorpLogo.png.
To search for an image, click the
Show Image Viewer
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
|
Icon: Filtering
Specify images to indicate if a filter is applied to a column.
| Unfiltered |
Specify an image to indicate that a filter is not applied to the column.
Enter the location of the file, including the relative path. For example,
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
|
| Filtered |
Specify an image to indicate that a filter is applied to the column.
Enter
the location of the file, including the relative path. For example,
To search for an image, click the
Show Image Viewer
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
|
| Left Border | Specify a left border for the filter indicator. Select solid, dashed or dotted and specify the pixel width and color. If you do not want a border to the left of the filter indicator, select none. |
Icon: Row handle
| Row Handle Image |
Specify the location of the file, including the relative path. For example,
images/AlphaCorpLogo.png.
To search for an image, click the
Show Image Viewer
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
|
- 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 - Rows tab Next topic Skin form — Components tab — Layouts — Trees and tables — Borders tab