Web Components for Insights Hub and Industrial IoT
Demo Application

The Simple Demo Application shows how to use MWeb Components for Insights Hub and Industrial IoT when building applications just using HTML, CSS and JavaScript.

It is provided via download on Siemens Industry Online Support.

The following picture shows an example of the demo application:

Integrate the Application into Insights Hub¶

Configure the Application via the Developer Cockpit¶

1. Open the Developer Cockpit from the Launchpad and select the Dashboard tab.
2. Click on Create new application.
3. Select Type Standard and Infrastructure Self Hosted.
4. Enter an arbitrary Display Name and an Internal Name which will be part of the application URL. The Internal Name cannot be changed after initial creation!
5. Enter a version number.
   • Major.Minor.Patch scheme is supported.
   • Versions must start with a major number >= 1.
   • The version cannot be changed after saving.
6. Upload an icon for your application.
7. Enter the component name.

The component name must be the same as specified in the manifest.yml file.

1. Add one endpoint for your component using /** to match all of your application paths.
2. Enter the URL of your application.
   • Use cf app {app_name} to get the URL for your deployed application.
3. Set the content-security-policy according to the examples:

    # "Europe 1"
    default-src 'self' *.eu1.mindsphere.io; style-src * 'unsafe-inline'; script-src 'self' 'unsafe-inline' *.eu1.mindsphere.io; img-src * data:;

  11. Click on Save.

You are redirected to the application details. Your application is in the In-Development state and is ready for registration.

Configure the Application Roles & Scopes¶

1. Switch to the Authorization Management tab.
2. Select the application.
3. Create an application scope, e.g. simplecomponentdemo.all, for accessing the application from the Launchpad.
4. Add the following Core roles to enable access to the respective APIs. If one of these role is missing, the related web component will not work.
   • mdsp:core:assetmanagement.xxx
     Required for asset view and custom map
   • mdsp:core:iot.tsaUser
     Required for time series chart
   • mdsp:core:iot.timUser
     Required for time series chart
   • mdsp:core:em.eventcreator
     Required for event view
   • mdsp:core:iot.filAdmin
     Required for file view
   • mdsp:core:tsm.full-access
     Required for rule view

Register the Application¶

1. Switch to the Dashboard tab.
2. Open the application details.
3. Click on Register.

Assign the Application Roles¶

1. Open the Settings app from the Launchpad and switch to the Roles tab.
2. Select the application role and click on Edit assignments.
3. Assign your user to the application role.
4. Click on End editing.
5. Log out of from Insights Hub and log in again.

Congratulations, your very first application based on Web Components for Insights Hub and Industrial IoT is running in your tenant.

Feel free to adapt the web components with attributes, stylings etc. for your needs.

Troubleshooting¶

• The App is not visible on the Launchpad
  Check if you assigned the application role to your user in the Settings app. After assigning new roles, a logout/login is required.
• The App does not fully load and the developer console shows "Content Security Policy" errors
  Unregister the app and update the content-security-policy settings in the Developer Cockpit as instructed above.
• Web components are loaded, but there is an "assetList" error or no assets are shown
  Make sure that the mdsp:core:assetmanagement.*** role is assigned to your application.

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