cancel
Showing results for 
Search instead for 
Did you mean: 

IoT controls in Business Application Studio: possible?

geertvermuyten3
Explorer
0 Kudos

Hi,

now that WebIde in the trial is coming to its end, I tried to re-create a simple IoT Freestyle project from WebIde in the Business Application Studio.
However, whenever I add an IoT control (like IoTMap), the application won't run correctly.

I get this error when looking at the debugger tools:

Uncaught (in promise) Error: failed to load 'sap/ui/iot/IoTMap.js' from https://sapui5.hana.ondemand.com/./resources/sap/ui/iot/IoTMap.js: script load error
    at HTMLScriptElement.b (ui5loader-dbg.js:1330)

I tried adding/changing various things in the Component.js, manifest.json, .... but the problem remains.

So, basically, how can one create an IoT app with IoT controls in the Business application studio?

Thanks.

Regards,

Geert.

0 Kudos

Deer Geert,

as you know the re-use controls were developed for WebIDE. we did not invesitgate yet deeper, how those could be leveraged in Business Applicaiion Studio, as in the future SAP IoT aim at re-using standard UI5 controls as much as possible.

We are planning to re-fresh the WebIDE IoT Application template in December as a first step towards this. In this refreshed template we will use the standard UiI5 map. Therefore, we would recommend for BAS also to use the UI5 standard map.

Best Regards,

Nicolas

Accepted Solutions (0)

Answers (2)

Answers (2)

0 Kudos

Hi Geert,

As nicolaschristopher.liebau mentioned, you can make use of the standard UI5 Map, which will give you a lot of those functionalities which IoT Map provides.

However, looking at the error, I understand that you are unable to access IoT Controls in the new IoT Free style application that you have created using Business Application Studio.

This could happen if there is an entry of "sap.ui.iot" in your manifest.json (sap.ui5.dependencies.libs). I would suggest to remove this entry and add the following as the first line in the Component.js of your application,

jQuery.sap.registerModulePath("sap.ui.iot", "/resources/sap/ui/iot/");

This would make sure you are accessing the proper route from xs-app. The route in xs-app.json of the app-router should be:

{
      "source": "^/resources/sap/ui/iot/(.*)$",
      "destination": "IOTAS_CONTROLS",
      "target": "/sap/ui/iot/$1",
      "csrfProtection": false
}

And the mta.yaml would look like this:

_schema-version: "3.2"
ID: samplesap
version: 0.0.1
modules:
- name: samplesap-approuter
  type: approuter.nodejs
  path: samplesap-approuter
  parameters:
    disk-quota: 256M
    memory: 256M
  requires:
  - name: samplesap_html_repo_runtime
  - name: IOTAS_CONTROLS
    group: destinations
    properties:
      strictSSL: false
      forwardAuthToken: false
      name: IOTAS_CONTROLS
      url: '~{url}'
- name: samplesap_ui_deployer
  type: com.sap.application.content
  path: .
  requires:
  - name: samplesap_html_repo_host
    parameters:
      content-target: true
  build-parameters:
    build-result: resources
    requires:
    - artifacts:
      - HTML5Module-content.zip
      name: HTML5Module
      target-path: resources/
- name: HTML5Module
  type: html5
  path: HTML5Module
  build-parameters:
    builder: custom
    commands:
    - npm run build
    supported-platforms: []
resources:
- name: samplesap_html_repo_runtime
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-plan: app-runtime
- name: samplesap_html_repo_host
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-plan: app-host
- name: IOTAS_CONTROLS
  properties:
    url: 'https://sapuiiot-stakeholder.cfapps.sap.hana.ondemand.com'
build-parameters:
  before-all:
  - builder: custom
    commands:
    - npm install
geertvermuyten3
Explorer
0 Kudos

Hello Ankit,

I tried what you said (I think I tried something like this also earlier (like the changes you have to do in the WebIde before you can deploy it to Cloud Foundry)), but with your suggested changes, I get this error when running my configuration:

xs-app.json/routes/0: Format validation failed (Route references unknown destination "IOTAS_CONTROLS")

My xs-app.json looks like this:

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^/resources/sap/ui/iot/(.*)$",
      "destination": "IOTAS_CONTROLS",
      "target": "/sap/ui/iot/$1",
      "csrfProtection": false
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

Thanks for any other suggestions 🙂

Regards,

Geert.

0 Kudos

Hi geert.vermuyten3,

There could be two possibilities here:

1. There is another xs-app.json in your project, in which case, the new route needs to be added in the other xs-app.json (corresponds to the application-router).

2. If this is the only xs-app.json, it means that the mta.yaml has a problem, if you can share that with me, I can provide some input.

I hope this helps. Thanks. 🙂

geertvermuyten3
Explorer
0 Kudos

Hi Ankit,

you were right. I had added the code to the wrong xs-app.json.

I created something new from scratch, did your suggested changes and indeed, no error when running the configuration.

However, from the moment I add an IoT control (like IoTMap) I still have a failed to load error:

Uncaught (in promise) Error: failed to load 'sap/ui/iot/controls/IoTMap.js' from /resources/sap/ui/iot/controls/IoTMap.js: script load error
    at HTMLScriptElement.b (ui5loader-dbg.js:1330)

I added my sample project to github so you could check if you feel like it and correct whatever is missing/wrong.

https://github.com/gvermuyt-dxc/basiotcontrol.git

Thanks,

Regards,
Geert.

0 Kudos

Hi geert.vermuyten3,

I got a chance to try this out today and wrote a short blog on the same. If you refer to section 3.1 and 3.2 of this blog, it should explain how IoT Controls can be loaded when you run the application locally. You will have to add the IoT Controls route to this xs-app.json and would need to bind your local application to an instance of destination service.

Hope the blog helps. Please let me know if you have any issues while trying these steps.

Thanks,

Ankit

geertvermuyten3
Explorer
0 Kudos

Ok, thank you.

I was already thinking about using the standard UI5 map since I didn't find any other solution, but I was kind of hoping I could re-use the IoT controls in BAS.

Regards,

Geert.