Intro

The system information bar is used to differentiate tenants in SAC and DSP.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=56795-16334&t=SQmE6dOvM9cGLrP8-11

When to Use

Do

  • Differentiate between different tenants in SAC and DSP
  • Display above the Shell Bar

Don't

  • Use icons if the component is a custom type
  • Use the component as an alert or message strip
  • This feature is currently not available in BDC

Types

System Information Bar - Standard

The System Information Bar includes three standard types: Test, Development, and Production. Each type uses a predefined icon that cannot be modified.

Three horizontal full-width banner bars stacked vertically, each representing a standard System Information Bar tenant type. The top bar is orange with a stethoscope icon and the label "Test". The middle bar is purple with a code brackets icon and the label "Development". The bottom bar is blue with a fast-forward icon and the label "Production". All text is white and centered within the bar.

Standard System Information Bar

System Information Bar - Custom

Colors in custom System Information Bars have no semantic meaning and can be customized alongside the title. Icons are not supported for custom bars.

A single horizontal full-width banner bar centered vertically on a light grey background. The bar is bright magenta/fuchsia with the white bold label "Custom" centered within it. This represents the custom type variant of the System Information Bar, where the color and title can be freely configured.

Custom System Information Bar

Behavior and Interaction

Customize System Information Bar (SAC)

Users can customize the Type, Title, and Color of the System Information Bar in the Administration › Default Appearance settings in SAC. The System Information Bar can also be shown or hidden using the “Display the system information” toggle.

Screenshot of the SAP Analytics Cloud Administration UI open to the "Default Appearance" tab. The page shows a "System Information" settings section with the "Display the system information" toggle switched on (blue). Below the toggle, three fields are visible: a "Type" dropdown set to "Custom", a "Title" text field containing "SAC Design Tenant", and a "Color" swatch selector showing a dark grey color. The page header shows a purple System Information Bar at the top reading "SAC Design Tenant". The left sidebar shows the SAP navigation icons. Other visible tabs include System Configuration, Tenant Links, Data Source Configuration, Security, External Systems, App Integration, Notifications, and Catalog.

Default Appearance setting in SAC

Customize System Information Bar (DSP)

Users can customize the Type, Title, and Color of the System Information Bar by clicking the Edit button on the top right in the Configuration › System Information settings in DSP. The System Information Bar can also be shown or hidden using the “Display System Information” toggle.

Screenshot of the SAP Data and Services Platform (DSP) Configuration UI open to the "System Information" tab. The main content area shows a read-only "System Information" panel with three labeled fields: Type set to "Development", Title set to "Development", and Colour showing a purple swatch. In the top-right corner of the panel, a green "Display System Information" toggle is enabled, and an "Edit" link is highlighted with a pink annotation and a cursor icon labeled "click", indicating the user should click Edit to modify the settings. A purple System Information Bar reading "‹ › Development" is visible at the top of the application shell. The tab bar includes: Data Integration, Security, Audit, Monitoring, IP Allowlist, Tasks, Database Access, SAP BW Bridge, Unified Customer Landscape, Workload Management, System Information, and More.

System Information setting in DSP

Screenshot of the SAP Data and Services Platform (DSP) Configuration UI showing the "System Information" tab with a "Set System Information" modal dialog open in the foreground. The dialog contains: a yellow warning banner reading "Saving the changes will show system information to all users"; a "Type" dropdown currently set to "‹ › Development" with a purple color swatch; and a "Preview" section showing a Browser Tab Favicon icon and a full-width purple Info Bar labeled "‹ › Development". At the bottom of the dialog are "Confirm" (blue, primary) and "Cancel" buttons. The background page is dimmed, showing the System Information settings panel with Type: Development, Title: Development, and a purple Colour swatch. A purple System Information Bar reading "‹ › Development" is visible at the top of the shell.

Set System Information Dialog in DSP