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:
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, MindSphere Status or MindSphere Academy).
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:
To individualize the company logo, company name and tenant specific links for the MindSphere OS Bar, please refer to the chapter Customize the OS Bar with “Provider” in the Settings documentation.
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:
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:
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:
Framework | Chrome 63 | Firefox 57 | IE 11 | IE Edge | IOS 11 | Chrome Mobile (Android 8.0) |
---|---|---|---|---|---|---|
React | OK | OK | OK | OK | OK | OK |
Vue.js | OK | OK | OK | OK | OK | OK |
jQuery + HTML | OK | OK | OK | OK | OK | OK |
Knockout | OK | OK | OK | OK | OK | OK |
Polymer 1.11.2 | OK | OK | ||||
Polymer 2.6.0 | OK | OK | OK | OK | OK | OK |
Angular 4.4.4 | OK | OK | OK | OK | OK | OK |
Angular 5.2.9 | OK | OK | OK | OK | OK | OK |
OpenUI 5 | OK | OK | OK | OK | OK | OK |