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.

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, 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

The Launchpad Header section contains the following prefilled fields on the basis of the base UI5 theme that you can overwrite by selecting the color picker:

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

The Launchpad Navigation (Main menu & Settings menu) section contains the following prefilled fields on the basis of the base UI5 theme that you can overwrite by selecting the color picker:

  • Background Color

  • Border Color

  • Text Color

  • Text Hover Color

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

The Active App Side Bar (Enable launchpad "Pin active apps to the left side bar") section contains the following prefilled fields on the basis of the base UI5 theme that you can overwrite by selecting the color picker:

  • Background Color

  • Border Color

Launchpad Canvas

The Launchpad Canvas section contains fields to configure the launchpad canvas (content area of the launchpad). You can configure the launchpad canvas with the following options:

  • Launchpad Background Color

  • Launchpad Background Image (image for the launchpad canvas selected from the Media Library tool)

  • Launchpad Background Opacity

  • Launchpad Background Image Placement

  • Launchpad Background Image Repeat

  • Launchpad Background Image Size

Launchpad Tile Group Pages

The Launchpad Tile Group Pages section contains the following prefilled field on the basis of the base UI5 theme that you can overwrite by selecting the color picker, or by changing the blur:

  • Launchpad Tile Group Page Background Color

  • Launchpad Tile Group Page Background Blur (background color must be transparent or translucent) (you can change the blur of a tile group page background in ascending groups of 2px blur)

Application Pages

The Application Pages section contains the following prefilled field on the basis of the base UI5 theme that you can overwrite by selecting the color picker, or by changing the blur:

  • Application Page Background Color (only pages with solid background design)

  • Application Page Background Blur (background color must be transparent or translucent) (you can change the blur of a tile group page background in ascending groups of 2px blur)

Scrollbar

The Scrollbar section contains the following prefilled fields on the basis of the base UI5 theme that you can overwrite by selecting the color picker, or by changing the scrollbar width:

  • Face Color

  • Track Color

  • Scrollbar Width (Chrome, Safari, Firefox & Opera)

Tile Group Appearance tab

You can add one or more tile 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 layouts sorted below it when the settings are applied.

Tile Appearance tab

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.

Tiles inherit tile layout settings configured in tile groups and launchpad layouts. Add one or more tile layouts in the Tile Appearance tab if you have tile appearance settings that should be used on all tiles in the launchpad.

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 of and select a brand image for the following login navigation objects of a launchpad layout by opening a color picker or carrying out configurations for each object:

Login Page Header

The Login Page Header section contains the following prefilled fields on the basis of the base UI5 theme or the color configuration settings defined for the launchpad header in the Style tab that you can overwrite by selecting the color picker:

  • Header Color

  • Text Color

Login Page Canvas

The Login Page Canvas section contains the following prefilled fields to configure the login page canvas (content area of the login page) on the basis of the base UI5 theme or the color configuration settings defined for the launchpad canvas in the Style tab. You can configure the login page canvas with the following options:

  • Background Color

  • Background Image (dedicated image for the login page canvas selected from the Media Library tool)

  • Background Opacity

  • Background Image Placement

  • Background Image Repeat

  • Background Image Size

Login Box Background

The Login Box Background section contains the following prefilled field on the basis of the base UI5 theme that you can overwrite by selecting the color picker, or by changing the blur:

  • Background Color

  • Background Blur (background color must be transparent or translucent) (you can change the blur of a tile group page background in ascending groups of 2px blur)

Login Box Text

The Login Box Text section contains the following prefilled fields on the basis of the base UI5 theme that you can overwrite by selecting the color picker:

  • Text Color

  • Label Color

  • Link Color

  • Link Hover color

Login Box Input Fields

The Login Box Input Fields section contains the following prefilled fields on the basis of the base UI5 theme that you can overwrite by selecting the color picker:

  • Background Color

  • Border Color

  • Text Color

Login Box Buttons

The Login Box Buttons section contains the following prefilled fields on the basis of the base UI5 theme that you can overwrite by selecting the color picker:

  • Background Color

  • Border Color

  • Text Color

  • Background Hover Color

  • Border Hover Color

  • Text Hover Color

Login Box Brand Image

You can select a brand image to insert in the login box according to the following settings:

  • Do not display brand image in login box

  • Brand image (dedicated brand image for the login box selected from the Media Library tool)

  • Brand image placement

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

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.

Related topics