Skip to Content
Technical Articles
Author's profile photo Ankit .

Run an IoT Application using SAP Business Application Studio

This blog contains steps on creating an IoT Application using IoT Controls and templates on SAP Business Application Studio.

If you are not familiar with SAP Business Application Studio, I would suggest you to refer the documentation on the same. We have already seen how Web-IDE can be used to create IoT Applications and deploy the same to Cloud Foundry in this blog post.

1.  Initial Setup

If you are aware of the setup of Business Application Studio and already able to create and run simple UI5 Applications, you can skip this step. For the others, let us look at the step by step process:

1.1. Setting up Business Application Studio

 

If you have access to your Trial account on CF, you can access the Business Application Studio from this link, if it was already setup before. If not, go to Trial Account and click on “Enter Your Trial Account”

This will take you to the list of subaccounts inside your Global trial account. By default, trial subaccount should be visible here.

Click on the trial subaccount, which takes you to the overview section of this subaccount. Next, click on the Subscriptions tab on the left pane. This will list all the available applications and services which you can use from your trial account. Search for “SAP Business Application Studio” in the list and click on it. Click on the “Subscribe” button to subscribe to this application.

 

Click on “Go to Application” link to access the Business Application Studio Application. Your Business Application Studio is ready for use.

If you do not have access to your trial account anymore, you need admin access to any Global account on SAP CF. After this you can either create a new subaccount or click on an existing subaccount where you have admin access. After this click on “Subscriptions” tab in the left pane and follow the same steps as above.

 

1.2. Creating Your Workspace

 

Next step is to create Dev Space before your can start building applications. Click on “Create Dev Space”. By default, SAP Fiori would be selected. You can keep the same selection, give a name to your dev space and click on “Create Dev Space”.

You can create a maximum of 2 dev spaces and only one of them can run at any point of time.

After the dev space is created, click on the start button to run the virtual machine.

Once the machine is in started state, click on the name of the dev space to enter your development environment and your workspace.

 

2.  Clone an existing IoT Application

If you already have an IoT Application which was created using Web-IDE, then we can clone the same application in SAP Business Application Studio.

Business Application Studio offers the same shortcuts which are available in Microsoft Visual Studio, which offers a very easy development environment.

Use the shortcut,

# mac
cmd + shift + p

# windows
ctrl + shift + p

to open the command palette and type “Open New Terminal” to open a terminal window in the active workspace.

 

Using the terminal you can clone a Git repo where you have the SAP IoT Application created using the web IDE template. If you do not have any such repo, you can use this for test purposes. However, the service bindings, thing types. psts used in this application would need to be updated.

The cloning can also be done using the “Clone from Git” link available in the Welcome Page. Once the git repo is cloned, click on Open Workspace, and select the project folder which was created after the cloning operation. This will open up a new workspace where we will create our application that can be run using Business Application Studio.

3.  Create SAP BAS compatible IoT Application

Before creating the IoT Application, we need to setup our org and space in Business Application Studio. This can done by clicking on the bottom-left message in the tool, “The organisation and space in CF have not been set”. This would log you into the cf org and space. Select the trial account and dev space if you are using trial account for running and deploying the application.

Click on File -> New Project from Template and select “SAP Fiori Freestyle Project” to proceed. In the next screen, Select the target running environment as “Cloud Foundry” from the dropdown. Choose SAPUI5 Application and continue. Give a project name to your application, say, “iotapplication” and click Next. Choose HTML 5 Application Runtime as “Standalone Approuter” from the dropdown and click Next. You can change the default name of the HTML5 Module if you need and then proceed without changing other values in the next screen.

We do not require to do any changes for the View Name, since this HTML5 module is just a placeholder which we will replace with the IoT Application’s webapp content (sample app’s webapp folder) which we cloned from git. Proceed to next which will generate the project. After generation, click on “Add project to workspace”, which will add it to the existing workspace.

Open the HTML5Module folder and delete the “webapp” folder. Move the webapp folder from the cloned sample application to the newly created Application’s HTML5Module folder as shown below:

3.1.  Bind a service to locally run MTA module

 

To run the application locally, we need a destination service binding that can take care of loading the IoT Controls. Following steps need to be performed for this:

To load IoT controls, we need to create a new destination in the destination configuration of the trial subaccount (or targetted subaccount). Create the destination for IOTAS_CONTROLS as shown in the below image:

URL: https://sapuiiot.cfapps.eu10.hana.ondemand.com/sap/ui/iot

Additional Properties:

HTML5.DynamicDestination: true
WebIDEEnabled: true

After this destination is created, next step is to bind the local mta module with this destination. For that, we need to create a destination service. To create a new instance of destination service, open the command palette of Business Application Studio, and type “Create a new service instance”, give a name of the service instance, choose the service type as “destination”, and service plan as “lite”. This will create the service in the trial subaccount’s dev space. To verify, type the command

cf services | grep <service_name>

This should return the service.

Once the service is created, we need to bind the service with the locally running MTA. To do this, open the command palette again (cmd+shift+p) and type “Bind a service to locally run application”. Next, choose the location of the new iot application that was created, and click “Select folder for .env file”. You will be prompted to choose the service next. Select the service you had created a while back and that will complete the binding. This creates a “.env” file in the project.

3.2.  Add route for IOTAS_CONTROLS

 

Open the xs-app.json inside HTML5Module, and add the route for IoT Controls by adding this object as the first element in the array “routes”.

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

The xs-app.json would look like this:

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

3.3.  Create a Run Configuration

 

Click on Run configuration option on the left pane and add a new configuration.

This will allow you to choose any runnable application from Business Application Studio, where you can select HTML5Module and proceed. Choose the UI5 version you want to run your application with. This creates a new run configuration.

Copy the content of .env file to the .env1 file inside HTML5Module.

Open HTML5Module -> webapp -> Component.js and enter this as the first line:

// @ts-ignore
jQuery.sap.registerModulePath("sap.ui.iot", "/resources/sap/ui/iot/");

This makes sure that the route that has been created in the xs-app.json is used by the locally running application.

3.4.  Run the Application

 

Go to Run Configurations and click on the green icon to run the application.

This will run the HTML5 application and you can see that it successfully loads the IoT Controls from the destination service as well. Similarly, we can create other destinations which will take care of loading the IoT data from services like “IOTAS-ADVANCEDLIST-THING”.

 

I will update this blog to also cover deploying the application to CF.

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Geert Vermuyten
      Geert Vermuyten

      Hello Ankit,

      thank you for this very informative blog.

      So, I got it working when I just create an app with just an iotcontrol (like IoTMap) on it.

      However, I also tried to do the same for a full IoT app (with the LandingPage etc...), and then it won't work. It opens the application, but seems to be in an endless loop.

      When I check the developer tools in Chrome, I see these errors:

      Error%20log

      Error log

      I think it's related to my definition of my destinations. How did you find out the correct URL for the controls destination? (https://sapuiiot-sandbox.cfapps.sap.hana.ondemand.com/sap/ui/iot)

      Where does the "sandbox" comes from? Why is there no authentication. (When I looked at the destinations that were created in Neo (which I now cannot verify anymore), those where with OAuth2SAMLBearerAssertion authentication)

      So for example, for the advancedlist thing destination, I used this url:

      https://advancedlist-thing-sap-sandbox.cfapps.sap.hana.ondemand.com.

      Is that correct ?

      For my other destinations I used these url's:

      https://composite-events-odata-sandbox.cfapps.sap.hana.ondemand.com

      https://details-thing-sap-sandbox.cfapps.sap.hana.ondemand.com

       

      So, do you have any suggestions how I can solve those errors and make the app working?

      Thanks.

      Regards,

      Geert.

       

      Author's profile photo Ankit .
      Ankit .
      Blog Post Author

      Hi Geert Vermuyten ,

      I am glad that the blog could be of some help. 🙂

      I had shared the IoT Library that is deployed on our development landscape, and hence the keyword "sandbox". I have updated the link that needs to be used for Live applications, so you don't need to worry about "sandbox" any more. IoT Library URL for live landscape: https://sapuiiot.cfapps.eu10.hana.ondemand.com/sap/ui/iot

      Like you said, this does not need any authentication, and that is because it is a UI library (few JS and XML files which are responsible for rendering all IoT Controls). However, all other service URLs need to be configured using either OAuth2SAMLBearerAssertion or OAuth2ClientCredentials, and you can find these here.

       

      Now, coming back to the console errors, it seems like the manifest.json of the application has a reference to "sap.ui.iot" inside "sap.ui5.dependencies.libs". You can remove this reference, and the Component.js needs to have

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

      as the first line, like I explained before. Can you verify if this is maintained correctly?

      Once the other Service URLs are also maintained in the destination service, the other 503 errors in your console should also be taken care of.

      Thanks,
      Ankit

      Author's profile photo Radu Constantin Simen
      Radu Constantin Simen

      Have you managed to add the iot destinations for services with OAuth2SAMLBearerAssertion ? For me they worked only with OAuth2ClientCredentials

      Author's profile photo Ankit .
      Ankit .
      Blog Post Author

      I haven't tried OAuth2SAMLBearerAssertion.

      I will give it a go and see if it works, so far ClientCredentials flow seems to work fine.

      Author's profile photo Geert Vermuyten
      Geert Vermuyten

      Hello Ankit,

      thanks again for the answer.

      And indeed, you were right. I had (once again) overlooked the reference in the manifest.json file. I removed it (the change in the Component.js I already had done) and then that error was gone.

      However, the other errors still remain:

      This capture is on the first load of the page:

      first error

      And when I reload the page I get this:

      errors reload

       

      So, this is what I did:

      I took your git repository and I changed in the manifest.json the types with my types (like in the pst value & the Thing_Service1) (as I had used them in my WebIde project) .

      I created also destinations like IOTAS-ADVANCEDLIST-THING-ODATA, IOTAS-COMPOSITE-EVENTS-ODATA, IOTAS-DETAILS-THING-ODATA, etc… with OAuth2ClientCredentials of our Leonardo IoT system.  (maybe I made an error there??)

      I created the destinations in my trial account (and I want to get the data from our Leonardo IoT system).

      I also added some routes in the xs-app.json file:

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

       

      And I don’t quite understood what you meant by:

      Once the other Service URLs are also maintained in the destination service,

      Could you elaborate a bit on this?

      And maybe you have a clue of what is still going wrong?

      (sorry I’m bothering you this much, but I’m still learning all this stuff)

      Thank you.

      Regards,

      Geert.

      Author's profile photo Ankit .
      Ankit .
      Blog Post Author

      Hi Geert Vermuyten,

       

      I can see that the errors of 503 (service unavailable) are changed to 500 (Internal Server Error) now, which means the service is available and you are able to reach the service. It will be difficult to comment on the reason without getting to know details at the code level, but here is the destination configuration which worked for me in one go.

       

      Destination Configuration

      Destination

       

      Thanks,
      Ankit

      Author's profile photo Geert Vermuyten
      Geert Vermuyten

      Hi Ankit,

      I can bang my head against the wall, because the cause of my issues was in the destination definition. I had forgotten to add the oauth/token in the Token Service URL.
      So thank you for the screenprint 😀

      I have now a fully working app. Yay.

      Thanks again.

      Regards,

      Geert.

      Author's profile photo Nadya Brown
      Nadya Brown

      OMG really awesome tutorial - just done it at first attempt following your steps. Thank you so very much!myMap

      myMap

      Author's profile photo Ankit .
      Ankit .
      Blog Post Author

      That's really good to know. 🙂