Launchpad Layout

With the Launchpad Layout tool, you can create different launchpad layouts to customize the look and feel of one or more launchpads. Launchpad layouts can be assigned globally to launchpads.

Settings tab

General

In the General section of the Settings tab, the ID, name, and assigned development package for the launchpad layout is displayed.

Launchpad layout UI5 theme

A launchpad layout is always based on either a custom UI5 theme or one of the standard UI5 themes. The UI5 theme defines how all UI5 controls look and feel, and influence object characteristics in a launchpad layout, for example, coloring, paddings, margins, and borders. Each UI5 theme is created for either a light appearance or a dark appearance on the basis of a UI5 theme version.

To ensure consistency in the application of corporate design for the look and feel of a launchpad, Neptune recommends that you create a custom theme in the SAP UI5 Theme Designer to use as a base UI5 theme for a launchpad layout. After importing of the UI5 theme, all color layout fields for the launchpad layout are prefilled on the basis of the base UI5 theme, and can be overwritten field by field in the Launchpad Layout tool manually, as required. Placeholder text in fields, for example, --sapShellColor, refers to theme attributes from the SAP UI5 Theme Designer that govern the rendered results of color configuration in the launchpad layout.

Presets

In the Presets section, you can configure the width of a header and the launchpad shell width for a launchpad layout within a launchpad.

Style tab

You can configure logo display, object layout, and color configuration, and assigning tile layouts of the following launchpad layout objects by opening a color picker or carrying out configurations for each object:

CSS variables derived from UI5 theme

The CSS variables are derived from either a default SAPUI5 or default UI5 theme of Neptune DXP - Open Edition, or a custom theme set as a base theme in the General tab of the Launchpad tool.

Browser Shortcut Icon (fav .ico or .png format, max 96x96px)

If you have selected a custom UI5 theme with a predefined browser shortcut icon (favicon), then when you select a browser shortcut icon from the Media Library, you override the predefined browser shortcut icon from the custom UI5 theme.

Logo

Company Logo (36px height. Variable width)

Company Mobile Logo (36x36)

If you have selected a custom UI5 theme with a predefined company logo or a company logo for mobile, then when you select a company logo from the Media Library, you override the predefined company logo or company logo for mobile from the custom UI5 theme.

Launchpad Header

Header Color
Header Bottom Border Color
Text Color
Interactive Text Color
Shell Interactive Border Color
Badge Background Color
Badge Color

Launchpad Navigation (Main menu & Settings menu)

Background Color
Border Color
Text Color
Text Hover Color

Active Apps Side Bar (Enable launchpad "Pin active apps to the left side bar")

Background Color
Border Color

Launchpad Canvas

Launchpad Background Color
Launchpad Background Image

Launchpad Tile Group Pages

Launchpad Tile Group Page Background Color
Launchpad Tile Group Page Background Blur (background color must be transparent or translucent)

Application Pages

Application Page Background Color (only pages with solid background design)
Application Page Background Blur (background color must be transparent or translucent)

Scrollbar

Face Color
Track Color
Scrollbar Width (Chrome, Safari, Firefox & Opera)

Content Layout

Tile Layout Appearance
Tile Group Layout Appearance

Login Page tab

As a default, the login page takes on the appearance defined by the rest of the layout. If needed, you can define a special look for the login page.You can configure the colors and select image of the following login navigation objects of a launchpad layout by opening a color picker or carrying out configurations for each object:

Login Page Header

Header Color
Text Color

Login Page Canvas

Background Color
Background Image

Login Box Background

Background Color
Background Blur (background color must be transparent or translucent)

Login Box Text

Text Color
Label Color
Link Color
Link Hover color

Login Box Input Field

Background Color
Border Color
Text Color

Login Box Buttons

Background Color
Border Color
Text Color
Background Hover Color
Border Hover Color
Text Hover Color

Login Box Brand Image

Do not display brand image in login box
Brand image

Mobile tab

You can configure color configuration of the following launchpad layout objects for a mobile form factor by opening a color picker for each object:

Android, iOS & PWA Status Bar

Background Color
Text Color

Layout Style (CSS) tab

You can add custom CSS layout variables to extend the launchpad layout.

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.