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.

To support the layout configuration process for your application, the Tile Group Layout tool contains in-app guidance via the icon across fields and toolbars.

In the list of tile group layouts, you can hover over the separate columns that correspond to the tabs in the Tile Layout Group tool to view at a glance what settings and layout color scheme are applied to each tile group layout configured in the tool.

Configuration tab

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

In the Target section, you can add a custom style class in Target Style Class. If you add a style case in Target Style Class, the tile group layout is only applied to tile groups with the same style class configured in the tile group settings.

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.

Tiles/Row tab

In the Settings for Tiles Displayed in this Tile Group section, in Tiles/Row, select how many tiles are displayed in a tile group with the following options:

  • One

  • Few

  • More (default)

  • Many

    A CSS grid and the tile-to-row configuration governs the display of tiles in tile groups. Cells have a 32px minimum height, and an approximate 32px minimum width. The width adjusts, however, to the screen size in use.

Size tab

In the 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 (default)

  • Center

  • Right

Text tab

In the Tile Group Header Text Settings section, you can select title alignment and title and subtitle font size for a tile group 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.

Image

An image selected from the Media Library or added as file URI.

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
  • Cover

  • Auto

  • Contain

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.

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.