MindSphere OS Bar

The MindSphere OS Bar provides a common UI component for all MindSphere apps.

The MindSphere OS Bar connects all MindSphere apps on a UI level. It is used for showing the app name and routing back to the Launchpad.

Mandatory integration

It is mandatory for every app to integrate the MindSphere OS Bar.

Version update

MindSphere OS Bar v4 is available since 2018/11/15.
Be aware that the prefix for HTML selectors, such as classes or IDs, has been changed from _msb to _mdsp!

The following image shows an example integration of the MindSphere OS Bar:

MindSphere OS Bar

Test the look and feel on the exemplary demonstration of the OS Bar.

Getting the MindSphere OS Bar

The MindSphere OS Bar is not available as a library. Its source is available at:

  • Region Europe 1: https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js
  • Region China 1: https://static.cn1.mindsphere-in.cn/osbar/v4/js/main.min.js

It must be loaded by every app when being started. For instructions refer to the Getting Started.

Hint

The previous version of the MindSphere OS Bar is available at https://static.eu1.mindsphere.io/osbar/js/main.min.js.

Features

Platform drop-down menu

A click on the MindSphere logo in the MindSphere OS Bar opens a drop-down menu, which displays information about the MindSphere platform. This includes the current MindSphere version, copyright information, and external links (e.g., for the MindSphere Store or MindSphere Status).

MindSphere OS Bar Downtime Notification

Tenant drop-down menu

A click on the tenant name or the company logo in the MindSphere OS Bar opens a drop-down menu, which displays information about the tenant, such as:

  • Tenant-specific legal links
  • Tenant name
  • Tenant type
  • Tenant location

The following image shows an example of this drop-down menu:

MindSphere OS Bar Downtime Notification

App information

App developers can define additional information for their app. A click on the app name in the MindSphere OS Bar opens a drop-down menu, which displays the app information and app operator-specific links.

The following image shows an example of this drop-down menu:

MindSphere OS Bar App Level Drop-down

Downtime announcements

When a downtime is scheduled, the red bell icon is displayed in the MindSphere OS Bar. A click on it opens a drop-down menu, which displays detailed information, such as:

  • Exact period of the downtime
  • Optional description

The following image shows an example of the downtime announcement drop-down menu:

MindSphere OS Bar Downtime Notification

Logout functionality

The logout icon on the right of the MindSphere OS Bar provides the logout functionality for every app that integrates the MindSphere OS Bar. It logs the user off from the MindSphere context and deletes all valid sessions.

Compatibility with other JavaScript frameworks

The functionality of the MindSphere OS Bar in combination with different JavaScript frameworks was successfully tested with the following browsers:

FrameworkChrome 63Firefox 57IE 11IE EdgeIOS 11Chrome Mobile (Android 8.0)
ReactOKOKOKOKOKOK
Vue.jsOKOKOKOKOKOK
jQuery + HTMLOKOKOKOKOKOK
KnockoutOKOKOKOKOKOK
Polymer 1.11.2OK    OK
Polymer 2.6.0OKOKOKOKOKOK
Angular 4.4.4OKOKOKOKOKOK
Angular 5.2.9OKOKOKOKOKOK
OpenUI 5OKOKOKOKOKOK
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top