Skip to content

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: Demo

Prerequisites

  • User account on a developer tenant
  • Cloud Foundry Command Line Interface (CF CLI)
  • A Cloud Foundry role which allows to push applications, e.g. spaceDeveloper
  • A developer role, either mdsp:core:Developer or mdsp:core:DeveloperAdmin

Deploy the Application to Cloud Foundry

  1. Unzip the demo application folder on your local computer.

  2. Open the manifest.yml and modify the name as desired.

  3. Open a command line interface (CLI) inside the folder with the application to be deployed.

  4. Configure the proxy settings, if necessary.

    Click here for detailed information on proxy settings

    If you are in a company network behind a proxy, you may have to set the proxies to reach the Cloud Foundry endpoints. Contact your administrator, if you face any timeouts or connectivity problems.

    Set the proxies for the Cloud Foundry CLI as shown below:

      set http_proxy=http://PROXY_IP:PROXY_PORT
  set https_proxy=http://PROXY_IP:PROXY_PORT

      export http_proxy=http://PROXY_IP:PROXY_PORT
  export https_proxy=http://PROXY_IP:PROXY_PORT

  5. Log in to CF using CF CLI. Enter cf login -a https://api.cf.{region}.{mindsphere-domain} --sso.

  6. Open the URL printed by the CLI and log in using your WebKey credentials to get a One Time Code.
  7. Enter the One Time Code in the CLI.

  8. Select your Cloud Foundry org and space using the following command:

    cf target -o {org_name} -s {space_name}

    No Cloud Foundry Orgs displayed

    If you do not see any Cloud Foundry orgs, you need to be added to your org. Refer to the How Tos for Cloud Foundry.

  9. Push the application to your Cloud Foundry space using:

    cf push

    Vendoring dependencies in region China 1

    Pushing applications to Cloud Foundry in region China 1 sometimes fails while downloading dependencies due to unstable international network access from China. Refer to the Cloud Foundry buildpack's documentation for 'vendoring' your application's dependencies:

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

  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.

  8. Add one endpoint for your component using /** to match all of your application paths.

  9. Enter the Cloud Foundry URL of your application.
    • Use cf app {app_name} to get the URL for your deployed application.
  10. 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.

Logout

The user token is only updated with the new scopes after logging out and logging in again. In rare cases it might take a couple of minutes until the role assignment has been propagated through the system.

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.
Last update: February 27, 2024

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