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 the Style Class field, you add a custom style class.

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.

Header Content tab

In the Tile Group Header General Settings section, you can select title alignment and title and subtitle font size for a tile group header.

Header Size tab

In the Header Size tab, you can select the width and alignment of the content of the tile group header.

You can configure the following options for a tile group header:

Content Width

Select between the following alignment options:

  • Full Screen

  • XXXLarge

  • XXLarge

  • XLarge

  • Large

  • Medium

  • Small

  • XSmall

Content Alignment

Select between the following alignment options:

  • Left

  • Center

  • Right

Header Image tab

In the sections Desktop, Tablet, and Mobile, you can specify the layout of a header image for the tile group depending on the output medium.

You can configure the following options for a header image:

Header Height

A free-text field to enter a CSS value to determine header image height.

Background Placement

Select between the following background header image placement options:

  • Center

  • Center Top

  • Center Bottom

  • Left Center

  • Left Top

  • Left Bottom

  • Right Center

  • Right Top

  • Right Bottom

Background Repeat

Select between the following options to configure how a background header image repeats itself across a tile group:

  • No Repeat

  • Repeat

  • Repeat X

  • Repeat Y

  • Initial

  • Inherit

Background Size

image layout in Header Height, Background Placement, Background Repeat, and Background Size.

In Header Image Mask CSS Gradient, you can modify the header image mask CSS gradient for the background to visually match text and the remaining launchpad layout according to corporate design.

Image Mask Gradient

You can configure the following options for the header image mask CSS gradient:

  • None

  • Top Down

  • Bottom Up

  • Left Right

  • Right Left

  • Custom Gradient

In Tile Group Header Background Image Filter, you can change the blur of a tile group header background image in ascending groups of 2px blur, and select sliders in the checkboxes Brightness, Grayscale, Invert, Hue Rotate, Opacity, Saturate to change tile group header background image settings.

Header Colors tab

Tile group header 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 header 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

Adjust the header bottom border width in pixels in Header Bottom Border Width.

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.

Related topics