Tile Layout

With the Tile Layout tool, you can create different tile layouts to customize the look and feel of a tile. Tile layouts can be assigned to one more tiles, tile groups, or launchpad layouts.

Settings tab

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

In the Layout section, you have the following options:

In Hide buttons and make tile clickable, hide any buttons of the tile from the end user so that the tile itself is fully selectable.

In Fit tile height to tile content, adjust tile height to the amount of content found within the tile, by selecting True or False.

In Remove tile borders, tile padding and tile margins, select either True or False.

In the StyleClass field, you add a custom style class.

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

Size tab

In the Tile Size tab, you can select the width and height of the tile. The default is 4x4 grid of cells that is based on a CSS grid that contain cells that individually have an approximate minimum height of 32px and width of 32px.

If you select the width and height in the tile group layout, the settings take precedence over tile size settings made in the Tile tool.

Content tab

In the Tile Title & Subtitle section, you can select title and subtitle alignment and title and subtitle font size.

In the Open Button section, you define what text or which icon is displayed on the start button of the tile, by selecting either True or False.

Icon tab

In the Icon tab, you can configure an icon for a tile as regards its placement in relation to the tile title or subtitle, the tile icon image shape, or whether to only use the tile icon/image in menus or not.

Image tab

In the Tile Image section, you can configure the following options for a tile image:

Image Type

Select between Background, Inline, and Top.

Image Placement

Select between the following 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 image repeats itself across a tile:

  • No Repeat

  • Repeat

  • Repeat X

  • Repeat Y

  • Initial

  • Inherit

Background Image Size

Select between the following options to configure how the background image of a tile behaves according to the size option selected:

  • Cover

  • Contain

  • Fill

  • None

  • Scale Down

Top & Inline Image Size

Select between the following options to configure how the top and inline images of a tile behave according to the size option selected:

  • Auto

  • Cover

  • Contain

Image height (CSS value like 200px, 3rem or auto)

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

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

In Tile Image Filter, you can change the blur of a background image and select sliders in the checkboxes Brightness, Grayscale, Invert, Hue Rotate, Opacity, Saturate to change image settings.

Tile Colors tab

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

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

  • Tile Background Color

  • Tile Hover Background Color

  • Tile Border Color

  • Tile Interactive Border Color

  • Tile Title Color

  • Tile Text Color

  • Tile Icon Color

  • Tile Separator Color

Button Colors tab

You can configure the colors of the following navigation button objects of a tile layout in standard state, hover state, and active state, by opening a color picker for each object:

  • Button Background Color

  • Button Border Color

  • Button Text Color

  • Button Background Hover Color

  • Button Border Hover Color

  • Button Text Hover Color

  • Button Background Active Color

  • Button Border Active Color

  • Button Text Active 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, tile group, or launchpad layout the tile layout is used.

Related topics