Cancel
Showing results for 
Search instead for 
Did you mean: 

Build new solutions and accelerate application development with Web Components on MindSphere

Siemens Dreamer Siemens Dreamer
Siemens Dreamer

As a part of the latest release, MindSphere took a page from the LEGO®  by adding Web Components to the tools available to developers. You are probably wondering how software widgets can be like plastic toy building blocks.

 

lego2.jpg

With Web Components, MindSphere now offers a library of reusable code building blocks to solve common challenges faced by developers to accelerate the application development process. Much like LEGOs, these components allow you to spend your time working on the larger solution rather than repeatedly rewriting the same smaller pieces.  Web Components empower developers to build web applications on MindSphere with any language they are familiar with through modern web standards. Easily reuse Web Component code blocks within your applications to allow developers more time to focus on innovation rather than re-development.

 

 

Why use Web Components.

An ever-growing Internet of Things landscape has put more strain on the time and talents of technical resources throughout organizations. Demand for new applications and advanced analytics are at an all-time high. MindSphere customers want their developers creating innovative solutions and tackling new challenges. Spending time and resources redeveloping known solutions into new applications prevents them from doing that. They need to be able to reuse standard functionalities already being used in MindSphere Applications. Web Components are part of the answer to that question through a few key benefits:

 

  • Increased productivity

Web Components are designed to suite typical use cases developers are confronted while developing industrial web applications, like navigation between assets or the visualization of asset data. Via defined parameters, Web Components can be customized to achieve individual customization or branding demands.

 

  • Fully integrated in MindSphere and MindSphere APIs

Web Components come fully integrated into MindSphere. They can be inserted purely using HTML tags which means there is no need to deep dive into MindSphere APIs in order to achieve early prototypes.

 

  • Based on modern web standards

Web Components bring the latest developments in JavaScript and web standards to MindSphere and makes it easy for Developers to code on MindSphere. Built on top of web standards like Web Components, Custom Elements and more they are optimized to run natively on all modern browsers and provide increased application performance. 

 

  • Improved developer experience through full flexibility

The standardized approach of web components brings full flexibility to app development and allows developers to use the frameworks and the tools they prefer to build applications with.

 

How can web components be used in my MindSphere application.

Web components can be integrated in your MindSphere application in just few simple steps.

 

1. Go to the web components section in the Developer Documentation

Documentation link

 

2. Add the library as source to your application

 <script id="mdsp-webcomponents-loader" type="text/javascript" src="https://static.eu1.mindsphere.io/webcomponents/v1/index.js" ></script> 

 

3.  Place the html tag within your code, for example, to display event data from your tenant

<mdsp-event-view></mdsp-event-view>

 

4. Customize the component via attributes as described within the component’s documentation

<mdsp-event-view style="height:400px; display: block" locale="de" pager-mode="Advanced" selectable="true" pager></mdsp-event-view>

 

5. Listen for events of the web components e.g. to print machine events to your console

const eventViewComp = document.querySelector('mdsp-event-view');

eventViewComp.addEventListener('selectedEventChanged', function (eventParams) {
    console.log(JSON.stringify(eventParams.detail)); 
});

 

6. Push your app to your MindSphere Developer Environment.

$ cf push

 

How to get access to MindSphere Web Components.

Web Components are available as part of the MindSphere developer experience and can be used freely within all Value Plans. Visit the developer documentation on MindSphere.io to receive more information on web components’ capabilities and how applications can be created based on these. To help you to get started faster, further examples and snippets are available.

 

Although they may not be as colorful as LEGO bricks, MindSphere Web Components optimize the time spent on projects and refocus development efforts on larger solutions goals. Register for a MindSphere Account and get started with MindSphere Web Components today!