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

With its latest release, MindSphere took a page from LEGO® by adding Web Components to the MindSphere developer toolkit. You are probably wondering how software widgets can be like plastic toy building blocks.

Just like LEGO® blocks, Web Components are reusable code building blocks. They solve common challenges faced by developers to accelerate the application development process. So instead of worrying about the blocks, spend time working on the larger solution rather than repeatedly rewriting smaller pieces.

Additionally, Web Components enable modern web standards. Developers can build web apps on MindSphere with languages they are familiar with. Easily reuse Web Component code blocks within 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 address common use cases developers face while developing industrial web apps. This includes 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 JavaScript and modern web standards to MindSphere. This makes it easy for Developers to code on MindSphere. Built on top of web standards like Web Components, Custom Elements are optimized to run natively on modern browsers to provide improved application performance. 

Improved developer experience through full flexibility

The standardized approach of web components brings full flexibility to app development. In turn, developers can use standardized frameworks and the tools they prefer to build applications. Thus, reducing the burden on technical resources.

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 how to quickly build applications. 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 solutions goals.

To find out more about MindSphere and Web Components, get in touch with one of our Siemens MindSphere experts to learn more!

Leave a Reply