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.

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

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

Configuration tab

In the Configuration tab, the ID, name, and assigned development package for the tile 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 layout is only applied to tiles with the same style class configured in the tile settings.

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 the Layout tab, you have the following options:

Layout Settings

In Clickable Tile, hide any buttons of the tile from the end user so that the tile itself is fully selectable.

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

In Plain Background to remove tile borders, tile padding, and tile margins, select either True or False.

Tile Margin & Padding

In Tile Margin and Tile Padding, set tile margin and padding proportions for the tile by either inheriting default settings or selecting specific proportion settings.

You can also choose to apply tile padding to tile images.

Background images will always fill the entire tile. Other images will be positioned according to their specified placement and will fill the entire width of the tile. You can enable Apply Tile Padding to Tile Images to add padding to the left and right of top, inline, and bottom images. Padding will also be applied above images positioned at the top and below images positioned at the bottom.

Tile Buttons

Configure specific tile button settings to apply to the tile layout:

  • Icon Only Buttons

  • Open Button Icon Alignment

  • Button Alignment

  • Button Size

  • Button Font Size

Action Button & Context Menu

Configure specific action button and context menu settings to apply to the tile layout:

  • Disable Context Action Button

  • Disable Context Menu (Right Click)

Size tab

In the Size tab, you can select the width (column span) and height (row span) 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.

Tile width adapts to the available space depending on the screen size (amount of grid cells) and the tile width (column span in the grid).

The height (row span) controls the number of vertical grid blocks the tile occupies. Use this setting to align larger tiles with stacks of smaller tiles For example, a tile with a tile height set to Tower (row span of 8) is exactly as tall as two standard tiles stacked next to it. Note that this does not set a fixed pixel height, so the tile still naturally shrink or stretches to fit the layout of the surrounding content.

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.

Text tab

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

In the Tile Content Text section, you can select settings to influence the size, style, font family, padding, and alignment of detail text to apply for the tile layout.

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.

Icon font images will adapt the color from the UI5 theme applied to the launchpad layout. Icon font images work nicely in both light and dark appearance.

In addition to an icon font image, image files for light and dark appearance can be used. Image files will not adapt to light and dark appearance, so it’s possible to add two images, one for light appearance and one for dark appearance. If tile image files are maintained, they will be used in tiles and navigation items where applicable. When space is limited, icon font will be used.

The assignment of the icon image varies based on where the tile layout is added.

Tile

If this tile layout is added to a tile, the icon image is added to the tile area. If an icon image is configured in the tile itself, this will take priority over the icon image added in this tile layout.

Tile Group

If this tile layout is added to a tile group, the icon image will be added to the tile area of all tiles in that tile group. If an icon image is configured in any of the tiles, these icon images will take priority over the image added in this tile layout.

Launchpad Layout

If this tile layout is added to a launchpad layout, the icon image will need to be targeted with a CSS Style Class. To do this, do the following depending on the tool:

Tile: Add a CSS Style Class in the configuration. Tile Layout: Add the same class in the Target Style Class in the configuration. Launchpad Layout: Add the tile layout in the configuration.

Tile Image tab

In the Image Settings section, you can configure the following options for a tile image after having selected in from the Media Library in the Tile Image section:

Tile Image

Image Type

Select between the following type options:

  • Inline Below Title (Default)

  • Background

  • Top

  • Inline Below Icon

  • Inline Below Content

  • Bottom

Image Height

CSS value like 200px, 3rem or auto

Image Placement

Select between the following placement options:

  • Center (default)

  • Center Top

  • Center Bottom

  • Left Center

  • Left Top

  • Left Bottom

  • Right Center

  • Right Top

  • Right Bottom

Background Image Settings

Background Image Repeat

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

  • No Repeat (default)

  • 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 (default)

  • Contain

  • Fill

  • None

  • Scale Down

Top, Inline & Bottom Image Settings

Image Object Fit

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

  • Cover

  • Contain

  • Fill (default)

  • None

  • Scale Down

  • Inherit

  • Initial

  • Revert

  • Revert Layer

  • Unset

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

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 Color

  • Subtitle Color

  • Details Color

  • Status Color

  • Icon Color

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