MindSphere Web Components
Getting Started

Integration¶

1. Integrate the MindSphere Web Components 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 MindSphere 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(){
       // 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:

   <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.

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:

<!-- 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¶

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:

<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 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 Development License Agreement.