Tile Layout

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.

Set Clickable Tile to True to make the tile clickable. Buttons are hidden and the whole tile area is clickable. Tile actions will be accessible from the right-click context menu.

As a default, all tiles on the same row will have the same height. Set Fit Tile Height to True if the tile height should adjust to fit the tile content.

Set Plain Background to True to remove tile borders, tile padding, and tile margins.

In the Tile Size section, you can select the width and height of the tile.

Tiles are displayed in tile groups in the Neptune launchpad. The display technology is a pure CSS grid, with cells 32 px in minimum height and a width that is 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. Small mobile screens will only have 4 cells in the width, while a large desktop screen can have up to 64 cells. A default tile will have a width of 4 grid cells and a height of 4 grid cells. The default tile size will have enough room for all the normal information a tile can contain.

There are a lot of very creative ways to create tiles, all the way from a single icon/image in a 1x1 tile up to very big tiles containing whole applications or integration cards with lots of info and graphs. All the different elements in a tile have dedicated CSS classes. With a little effort a tile can be transformed into whatever you desire.

When a width and height is selected in the Tile Layout tool, a visual representation will show how the settings fit in among other tiles.

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 if the open button should only use an icon.

You can add a small descriptive icon to each tile. It can be one of the many thousands font icons included in Neptune, or an icon image. If icon image is set, it will be used in tiles and navigation items where applicable. When space is limited, icon font is used.

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.

In Icon Placement, you define the icon placement in relation to the title/subtitle text.

in Tile icon image shape, you define if the icon should have a circular or square form.

Set Only use tile icon/image in menus to True, if the icon should only be used in menus. If this is set, the icon will not be displayed in the tile.

In addition to an icon, a tile can include an image that will span the full width of the tile.

The Image Type setting will influence how the image is displayed in the tile.

To further adjust the image appearance, Background Image Placement, Background Image Repeat, Background Image Size, Top & Inline Image Size, and Image height can be manipulated.

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.

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, and Saturate to change image settings.

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.

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