Skip to content

MindSphere OS Bar

The MindSphere OS Bar connects all MindSphere applications on a UI level. It can be used for showing the application name and routing back to the launchpad.

Mandatory Integration

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

Example

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

MindSphere OS Bar

How to use

The MindSphere OS Bar is integrated just by adding a small JavaScript Snippet to your website / web app and a very simple html fragment to ensure the layout of OS Bar and app can be set-up automatically. If your app is served through e.g. an index.html file, you have to include the following line to that file.

  • Be aware that the MindSphere OS Bar does not set a valid viewport for your html/app. If there is no such viewport defined, neither the MindSphere OS Bar nor your application will be responsive.
  • MindSphere currently enforces certain Content-Security-Headers (CSP) which prevents the execution of inlined JavaScript. Therefore, the following snippet needs to be added in your JavaScript code:
1
2
3
4
5
6
7
8
...

_msb.init({
    title: "MindSphere OS Bar Demo",
    appId: "_mscontent"
});

...

App container id

The app markup has to be wrapped into a div element with id _mscontent, and the OS Bar JavaScript file has to be referenced and initialized in order to work. This id can also be parameterized (see later) if another id should be used.

Usage of position:fixed in your app

Be aware that the (current) height of the MindSphere OS Bar is 44 px and the usage of the css attribute position:fixed in your app can cause problems: This height might change on smaller screens due to responsive behaviour. As long as you only use static, relative or absolute positioning, the height of the OS Bar won't influence your application.

Configuration Options

The MindSphere OS Bar is configurable and will later provide options to show your tenant-specific legal information.

1
2
3
4
5
<div id="_mscontent">
  <!-- Main app markup goes here -->
</div>

<script src="https://static.eu1.mindsphere.io/osbar/js/main.min.js"></script>

Add the following snippet in your JavaScript code:

1
2
3
4
5
6
7
8
...

_msb.init({
    title: "MindSphere OS Bar Demo",
    appId: "_mscontent"
});

...
Parameter Description Default
title Specifies the title of the app, is not displayed if not specified. none
appId If present, the script looks for an element with ID attribute matching this parameter instead of the default element. This way the HTML markup can look different than the default markup described above. If no appropriate container element can be found, the OS Bar is not populated at all. Note: The OS Bar is populated above the element with the matching ID attribute (same level, but above).
Important If you customize your appId, then you have to set/add the _mscontent class on the container element so that the required styles still can be set automatically.
"_mscontent"
initialize If present, the script does not wait for a DomContentLoaded event to start the initialization but instead immediately tries to find the app containing element and creates the OS Bar markup above. This assumes that the DOM is already fully loaded and initialized and might have bad effects (or might even break) if the DOM is not fully loaded. true

Dynamic Insertion

If the initialize parameter is used / and the OS Bar script is inserted via JavaScript dynamically, the app developer has to make sure the initialization is only called after the script finished loading, otherwise the console will throw an error because the initialization function is unknown yet. This can be done e.g. as following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
...

(function(d, script) {
    script = d.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.onload = function(){
        _msb.init({
            title: "OS Bar Demo width dynamic initialization",
            initialize: true
        });
    };
    script.src = 'https://static.eu1.mindsphere.io/osbar/js/main.min.js';
    d.getElementsByTagName('head')[0].appendChild(script);
}(document));

...

Tip

The population / generation of the OS Bar will fail

  • if the CDN-hosted script and assets are unavailable

  • if the appId parameter is supplied but no matching element is present in the DOM tree

  • if no appId parameter is supplied and there is no element with default element attribute is present in DOM tree.

Logout functionality

A logout menu item will be integrated once the endpoint for logout mechanism is working and functional and will be available for every app automatically.

Compatibility with other JavaScript frameworks

The functionality of the 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 OK OK OK OK OK OK
Angular 4 OK OK OK OK OK OK
OpenUI 5 OK OK OK OK OK OK

Any questions left?

Ask the community


Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.