Skip to content

Web Components for Insights Hub and Industrial IoT
Getting Started

Integration

  1. Integrate the Web Components for Insights Hub and Industrial IoT by adding an HTML element to your website / web app:

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

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

    <script id="mdsp-webcomponents-loader" type="text/javascript" src="https://static.{region}.{mindsphere-domain}/webcomponents/v1/index.js" data-onload="onMdspWebComponentsLoaded"></script>
    
    function onMdspWebComponentsLoaded(){
        // 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 Web Components
    mdsp-components.min.js Web Components library
    mdsp-components-styles.css Styles for the 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:

    <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 Web Components for Insights Hub and Industrial IoT is available.

Configuration

Each web component provides a list of attributes which allow developers to configure the look and behavior 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:

<!-- View-mode "Card" -->
<mdsp-asset-view view-mode="Card" error-notification="true"> </mdsp-asset-view>
<!-- "Disabled search box" -->
<mdsp-asset-view search-hidden="true" error-notification="true"> </mdsp-asset-view>

Event Listeners

Web Components for Insights Hub and Industrial IoT 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:

<mdsp-asset-view error-notification="true"> </mdsp-asset-view>
<mdsp-file-view error-notification="true"> </mdsp-file-view>
// 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 Web Components for Insights Hub and Industrial IoT 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.


Last update: February 23, 2024

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