Grouplet-Based Tile Styling

Grouplet-based tile styling provides the ability to apply new styling to tiles created in pre-8.62 releases such that the styling affects only the content of the tile without modifying the tile content reference (CREF). The grouplet-based styling requires a change only to the grouplet component content or grouplet iScript content. The grouplet-based styling does not require any modifications to the tile CREF, so Applications do not need to redeliver tile CREFs when they implement advanced sectionalized homepage.

Note:

The grouplet-based styling is applicable only within the context of advanced sectionalized homepage, that is, the psc_hpmodel-A style must be implemented.

When grouplet-based styling is implemented, two types of tiles are automatically supported without requiring any modifications by Applications.

Tile grouplet content containing only an image (not the image defined in the tile CREF definition).
Tile grouplet content containing an image and a live data count.

However, these tiles are automatically supported only if the tiles are delivered with a specific structure and styling used in the pre-8.62 implementation of tile content. The following structure and styling is expected:

Type of Tile Structure and Styling

Type of Tile	Structure and Styling
Image only grouplet	`DIV.ps_box-group` with either `psc_tile_content` or `psc_tile-box-img` (this is a groupbox and it must be the top level to be rendered) `DIV.psc_tile-img` (any type of image based control) `IMG`
Image and live data count grouplet	`DIV.ps_box-group` with either `psc_tile_content` or `psc_tile-box-img` (this is a groupbox and it must be the top level to be rendered) `DIV.psc_tile-img` (any type of image based control) `IMG` `DIV.psc_tile_livedata-count.psc_nolabel` (display only text control like edit box with no label displayed) `DIV.ps_box-value` (count value here) `DIV.ps_box-label` (could come before the ps_box-value since it is not displayed)

Image only grouplet

DIV.ps_box-group with either psc_tile_content or psc_tile-box-img (this is a groupbox and it must be the top level to be rendered)

DIV.psc_tile-img (any type of image based control)

IMG

Image and live data count grouplet

DIV.ps_box-group with either psc_tile_content or psc_tile-box-img (this is a groupbox and it must be the top level to be rendered)

DIV.psc_tile-img (any type of image based control)

IMG

DIV.psc_tile_livedata-count.psc_nolabel (display only text control like edit box with no label displayed)

DIV.ps_box-value (count value here)

DIV.ps_box-label (could come before the ps_box-value since it is not displayed)

All other tile structures and styling require modification for the grouplet-based styling to render correctly on the pre-8.62 tiles. Application developers must consider the following aspects of the tiles and apply the styles appropriately.

Identify that this tile conforms to a general standard tile content, that is, the tile has an image, tile label, and one or more lines of content.
Ignore the layers of structure of the tiles, such as group boxes and HTML areas.
Identify the lines of content data directly to be displayed within the tile. Optionally, use new styles to control the rendering of the lines of content.

Style Name	Typical Structure Usage	Description
psc_tile-standard	Top-level Group box	Identifies that this tile has been tested by the application and works per standards defined by these styles. Do not use this style if the tile does not conform to tile standard content (for example - no image)
psc_tile-structure-ignore	Top-level Group box	Ignore the current structure (a groupbox) and all groupbox and HTML structures found within this structure. This styling uses display:contents which makes the CSS grid layout focus on only the important parts of the tile content (tile image, tile label, lines of data). This is the most commonly used style.
psc_tile-groupbox-ignore	Any group box level	Not necessary whether psc_tile-structure-ignore is used on an ancestor element. Allows ignoring of only groupbox structures from this element down to expose the data. Typically used for tiles requiring custom changes due to the structure, meaning that psc_tile-structure-ignore could not be used.
psc_tile-htmlarea-ignore	Any HTML Area level	Not necessary whether psc_tile-structure-ignore is used on an ancestor element. Allows ignoring of only HTML area structures from this element down to expose the data. Typically used for tiles requiring custom changes due to the structure, meaning that psc_tile-structure-ignore could not be used.
psc_tile-ignore	Any Container level	Applies to only a single element to be ignored for layout purposes (does not affect any children elements)
psc_tile-img-swap-dim	Image Control having psc_tile-img	Typically, tile images use the width as the major width allowing the height to be derived (allowing aspect ratio to be maintained). Typical tile image is 60x60 pixels so it actually does not matter. This style says to use the height instead of the width for the dimension.
psc_tile-data	Edit or Text Control	Indicates that this structure includes the live data information to be displayed as a line of data.
psc_tile-data-1 through psc_tile-data-6	Used in conjunction with psc_tile-data level	Indicates the line of information. Do not duplicate information as these tiles are used to properly center the tile image vertically.
psc_tile-emphasis-text psc_tile-label-emphasis-text psc_tile-value-emphasis-text	Tile line data	Shows the appropriate data with emphasis (typically the live data count coloring). Notice the first style applies to all contents of the control. The next two styles apply to either the label or value of the display-only textual data field.
psc_tile-emphasis-large-text psc_tile-label-emphasis-large-text psc_tile-value-emphasis-large-text	Tile line data	Same as previous row except larger text.
psc_tile-less-emphasis-text psc_tile-label-less-emphasis-text psc_tile-value-less-emphasis-text	Tile line data	Shows the appropriate data with less emphasis but not normal text (typically bolded). Notice the first style applies to all contents of the control. The next two styles apply to either the label or value of the display-only textual data field.
psc_tile-normal-text psc_tile-label-normal-text psc_tile-value-normal-text	Tile line data	Shows the appropriate data with normal text. Notice the first style applies to all contents of the control. The next two styles apply to either the label or value of the display-only textual data field.
psc_tile-secondary-text psc_tile-label-secondary-text psc_tile-value-secondary-text	Tile line data	Shows the appropriate data with smaller font as with secondary data. Notice the first style applies to all contents of the control. The next two styles apply to either the label or value of the display-only textual data field.