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.

Configuration

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

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

Tiles are displayed in tile groups in the Neptune launchpad using a pure CSS grid. A grid cell will have a minimum height of 32 px. The grid cell width will be approximately 32 px wide but the width will adapt to the screen size. The number of cells in the grid depends on the screen size and the tile/row configuration.

  • Screen Size: Small mobile screens will only have 4 cells in the width, while a large desktop screen can have up to 64 cells.

  • Tile/Row Configuration: The amount of grid cells can also be configured using the tile pr row setting. Check the graphic below showing how the tile/row configuration will influence different tiles in a standard launchpad.

tile group layout tiles row more
Figure 1. Example of a tile layout with many tiles/row

Header Size

In the Header Size section, you can configure the general layout of your tile group on the launchpad. The Content Width and Content Alignment can be configured.

Header Text

In the Header Text section, you can customize your tile group header, including title alignment of a header and title font size.

Header Image

In the sections Desktop Header Image, Tablet Header Image, and Mobile Header Image, you can specify the layout of the tile group depending on the output medium. You can adjust the header image layout in Header Height, Background Placement, Background Repeat, and Background Size.

In the Header Image Mask CSS gradient, you can apply an image mask gradient for the tile group header. This can greatly improve the visibility of the header title against the background image.

In Tile Group Header Background Image Filter, you can add image filters like Brightness, Grayscale, Invert, Hue Rotate, Opacity, and Saturate.

Colors

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

Where-Used tab

In the Where-Used tab, you can see in which tile group, or launchpad layout the tile group layout is used.