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 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.

Layout tab

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 Height of Tile to Tile Content, adjust tile height to the amount of content found within the tile.

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 the Tile Size section, you can select the width and height of the tile.

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.

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

In Tile Icon and Tile Image, you can add a custom image or a default icon as an icon on the tile. In Tile Icon, you can adjust the alignment and shape of an icon in relation to title and subtitle text.

If you select an icon or an image in the tile group layout, the settings take precedence over icon or image settings made in the Tile tool.

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.

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

If you select text or an icon in the tile group layout, the settings take precedence over text and icon settings made in the Tile tool.

Tile color configuration tabs

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.

Tile Colors tab

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 Text Color

  • Tile Icon Color

  • Tile Separator Color

Buttons 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