Skin form — Components tab — Layouts — Trees and tables - General tab
Use this tab to define default settings for text, border, and background in the selected grid format. You can then select a check box to apply these default settings to various table (grid) elements on the Rows, Headers, Borders, Behaviors, and Headers and footers tabs, rather than defining the text, border, and background style on each of these tabs.
The styles that you define on the General tab are not applied until you select to use them; for example, on the Rows tab, you can select the Use default text for this format check box to enable the default text format for odd rows in a grid.
- List report
- Summarized report
A preview of the currently selected format displays to the right. You can also preview formats by clicking Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview.in the toolbar and selecting one of the following preview options:
The responsive behavior of grids corresponds with the dynamic behavior of layouts and layout groups. When the screen size reduces or increases to the dimensions that you specify, the grid's appearance changes, according to the options you select. In the skin, you are able to specify a single primary column and multiple secondary columns. As determined by screen widths that you define (called breakpoints), the grid can remove or add "other" columns (ones that are neither primary or secondary). The table can also transform into a "fat list", in which the primary column becomes a header and the information in the secondary columns appears below the header. The grid can optionally be hidden completely.
Select this check box to define a custom text format:
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.
You can specify a custom border by selecting or clearing the Apply to all sides check box:
The following border styles are available:
Select this check box to define a custom background:
Select the background Type:
|Enable support for responsive breakpoints||Select this check box if you want to add a responsive breakpoint to your grid. When the screen size reduces to the dimensions that you specify, the grid's appearance changes, according to the options you select for the first, second, and third breakpoints.|
Select the format that the grid should use when rendering at the dimensions
specified for this breakpoint.
Typically, the second breakpoint determines the appearance of the primary and
secondary cells when the grid becomes a "fat list". (You have the same options for
dropping columns, transforming to a list, or hiding the grid as for Breakpoint1.)
|Breakpoint<n>||Typically, the third (and any other) breakpoints determine the final appearance of the grid or whether to hide it. (You have the same options for dropping columns, transforming to a list, or hiding the grid as for Breakpoint1 and Breakpoint2.)|
Creating custom table and tree table formats
To create a style format, perform the following actions:
The new format is populated with default values.
Click Add a format.
In the Create a new format dialog box, enter the Format name by using only alphanumeric characters (a-z and 0-9) and spaces.
The name cannot begin with a number. The format name that you enter is converted into the name CSS class or classes.
Provide a Usage annotation.
To create a style format by copying an existing format, click Actions and select Save as from the list.
- Creating custom table and tree table formats
You can create a new custom format or copy an existing one.
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.