Tile Group Layout

With the Tile Group Layout tool, you can create different tile group layouts to customize the look and feel of a tile group and to ensure consistency for the look and feel for a tile group or multiple tile groups. Tile group layouts can be assigned to one or more tile groups, or globally for launchpad layouts.

Settings tab

In the Settings tab, the ID, name, and assigned development package for the tile group layout is displayed.

In Tile Group Layout Hierarchy, you can add one or more tile group layouts to a tile group layout hierarchy to control precedence of tile group layout settings. The tile group layout that you sort to the top takes precedence over other tile group layouts sorted below it when the settings are applied.

Tile Group Layout tab

In the Tile Group Layout tab, you can configure the general layout specificity of your tile group layout.

In the Tile Group Layout Settings section, you can configure the general layout of your tile group on the launchpad. The Content Width, Content Alignment, and StyleClass can be configured.

In the Tile Group Header General Settings section, you can customize your tile group’s header, including title alignment of a header and title font size.

In the sections Desktop, Tablet, and Mobile, you can specify the layout of the tile group depending on the output medium. Adjust header image layout in Header Height, Background Placement, Background Repeat, and Background Size.

In Tile Group Header Background Image Filter, you can modify the header image gradient for the background to visually match text and the remaining launchpad layout according to corporate design. You can change the blur of a background image and select sliders in the checkboxes Brightness, Grayscale, Invert, Hue Rotate, Opacity, Saturate to change background image settings.

Tile Group Colors tab

Tile group colors for a tile group layout are inherited from the selected base UI5 theme for light and dark appearances. You can create custom tile group colors for a tile group layout to assign to a tile group or a launchpad layout, according to corporate design considerations.

You can configure the colors of the following tile group layout objects by opening a color picker for each object:

Header Background Color
Header Title Color
Header Subtitle Color
Header Bottom Border Color

Color picker

The color pickers offers the following granular color configuration options:

Color canvas: Rectangular canvas to display color configurations in the color picker.
Hue slider: Select to modify color hue.
Alpha slider: Select to modify color opacity.
Hex: The hex value of the selected color is displayed. Optionally enter a chosen hex value manually.
RGBA: Entry values for RGB (red, green, blue) color model with alpha channel for opacity. Optionally enter chosen RGBA values manually. When you select RGBA, HSLA values are grayed out.
HSLA: Entry values for HSL (hue, saturation, lightness) color model with alpha channel for opacity. Optionally enter chosen HSLA values manually. When you select HSLA, RGBA values are grayed out.
Last and Most-Used Colors: A palette of last-used and most-used colors from previous color configurations.
Use Last Color or Most-Used Color when Selected: You apply the selected last or most-used color from the Last and Most-Used Colors palette directly to the tile layout object or button layout objects.
Set to Transparent: You set the color configuration of the tile layout object or button layout object to transparent.

Where-Used tab

In the Where-Used tab, you can see in which tile group, or launchpad layout the tile group layout is used.