Configure the layout of your tile

In the Tile 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 and therefore.

The 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 shrinks or stretches to fit the layout of the surrounding content.

In the Tile Icon section, you can add an icon on the tile from the integrated SAP Icon Explorer.

Icon fonts from the integrated SAP Icon Explorer adapt automatically the underlying color scheme of the base UI5 theme selected for a launchpad layout, either for a light or dark appearance respectively. You can alternatively select an image file as an icon from the Media Library instead of an icon font from the integrated SAP Icon Explorer. In this case, the image file does not adapt to the underlying color scheme of the base UI5 theme. Select image files from the Media Library for the tile icon in a light and dark appearance respectively. If you have already selected an icon from the integrated SAP Icon Explorer, it takes precedence over images for light and dark appearance selected during display. . In the Image tab, you can add a custom source image for the tile for light appearance and dark appearance from the Media Library. . In the 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.

+ NOTE: 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. . To make layout changes to the tile appearance, open the Appearance tab. .. In Tile Layouts for Light Appearance, select Add Tile Layout to add one or more predefined tile layout settings from the Tile Layout tool to apply to your tile for a light appearance. If same tile layout settings are shared between multiple tile layouts, the top tile layout is prioritized when applying settings. .. By default, tile layouts added for light appearance are also used for dark appearance. In Tile Layouts for Dark Appearance, select Do Not Inherit Light Appearance Tile Layout to prevent the inheritance of light appearance for tile layouts for dark appearance and to add tile layouts for dark appearance separately. .. Select Add Tile Layout to add one or more predefined tile layout settings from the Tile Layout tool to apply to your tile for a dark appearance. If the same tile layout settings are shared between multiple tile layouts, the top tile layout is prioritized when applying settings. .. In the Tile Layout Settings section of the Settings tab , select Force Tile Layout Attributes! to enable the settings defined in the tile layouts added to this tile instead of the tile inheriting tile layout settings configured in launchpad layouts and tile group layouts by default. Select Clickable Tiles to make all selected tile clickable. Buttons previously displayed on tiles are hidden and the whole tile area is clickable. You can access tile actions from the right-click context menu. Enter the custom CSS style class in CSS Style Class for the tile.

Select image files from the Media Library for the tile icon in a light and dark appearance respectively.

You can bind Tile Icon Font to a global i18n model to localize/globalize the selected tile icon font.

You can add a custom source image for the tile for light appearance and dark appearance from the Media Library, specifying the image placement type, as well as further tile image settings.

Enter the custom CSS style class in CSS Style Class for the tile.

Select Clickable Tile to make the clickable. Buttons previously displayed on tiles are hidden and the whole tile areas is clickable. You can access tile actions from the right-click context menu.

In Tile Layouts for Light Appearance, select Add Tile Layout to add one or more predefined tile layout settings from the Tile Layout tool to apply to your tile for a light appearance. If same tile layout settings are shared between multiple tile layouts, the top tile layout is prioritized when applying settings.

In Tile Layouts for Dark Appearance, select Add Tile Layout to add one or more predefined tile layout settings from the Tile Layout tool to apply to your tile for a dark appearance. If the same tile layout settings are shared between multiple tile layouts, the top tile layout is prioritized when applying settings.

In Tile Layout Inheritance, select Prioritize Tile Layouts added to this Tile first to enable the specific settings for the tile defined in the Size, Icon, Image and Appearance tabs instead of the tile inheriting tile layout settings configured in launchpad layouts and tile group layouts by default.