Skip to content

MindSphere Web Components
Getting Started

Integration

  1. Integrate the MindSphere Web Components by adding an HTML element to your website / web app:

    1
    <script id="mdsp-webcomponents-loader" type="text/javascript" src="https://static.{region}.{mindsphere-domain}/webcomponents/v1/index.js"></script>
    

    For receiving feedback after the MindSphere Web Components have been loaded, you can optionally register for the callback data-onload and add a JavaScript snippet:

    1
    <script id="mdsp-webcomponents-loader" type="text/javascript" src="https://static.{region}.{mindsphere-domain}/webcomponents/v1/index.js" data-onload="onMdspWebComponentsLoaded"></script>
    
    1
    2
    3
    function onMdspWebComponentsLoaded(){
        // MindSphere Web Components are loaded
    }
    
    Resource files

    The following resource files are automatically loaded by the index.js:

    File Name Description
    native-shim.js Polyfills for browsers without native support of custom elements
    mdsp-common.min.js Basic library for the MindSphere Web Components
    mdsp-components.min.js MindSphere Web Components library
    mdsp-components-styles.css Styles for the MindSphere Web Components library

    Furthermore fonts and help images are loaded from an assets folder.

  2. Insert a web component by adding the element selectors in the index.html, e.g. for an asset list:

    1
    <mdsp-asset-view></mdsp-asset-view>
    
  3. Add the required Core roles when configuring your web app in the Developer or Operator Cockpit.
    For example the asset view component requires a assetmanagement role.

Info

A demo application which integrates the MindSphere Web Components is available.

Configuration

Each web component provides a list of attributes which allow developers to configure the look and behaviour of the component.

For example the asset view component can be set to different styles using the view-mode attribute, or the search box can be disabled and a error-notification displayed:

1
<mdsp-asset-view view-mode="Card" error-notification="true"> </mdsp-asset-view>
1
<mdsp-asset-view search-hidden="true" error-notification="true"> </mdsp-asset-view>

Event Listeners

MindSphere Web Components publish events when users interact with the user interface. Developers can use JavaScript listeners to detect these events and trigger further actions.

Example

The following example integrates an asset view and a file view. The file view displays the files assigned to the selected asset.

The selectors for the web components are added in the index.html and a JavaScript listener is used to update the file view when the asset selection is changed:

1
2
<mdsp-asset-view error-notification="true"> </mdsp-asset-view>
<mdsp-file-view error-notification="true"> </mdsp-file-view>
1
2
3
4
5
6
7
8
9
// Instantiate the JavaScript objects
const assetViewComp = document.querySelector('mdsp-asset-view');
const fileViewComp = document.querySelector('mdsp-file-view');

// Add a listener for the selectedAssetChanged event
assetViewComp.addEventListener('selectedAssetChanged', function (eventParams) {
    // assign the changed asset id to the file view
    fileViewComp.assetId = eventParams.detail.assetId;
});

Software Clearing

Make sure to list the MindSphere Web Components in your software clearing when using them in an application.

It is mandatory to include the readme-oss file hosted at https://static.{region}.{mindsphere-domain}/webcomponents/v1/readme-oss.html.

Any questions left?

Ask the community


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