RaspberryPi on SAP HCP – IoT blog series part 4: Create an SAPUI5 dashboard
Table of Contents
In the third blog post of this blog post series around Raspberry Pi and the SAP HANA Cloud Platform we’ve provided our Raspberry Pi with a Java app that can retrieve the data from the external sensor and send it to the Java app on the SAP HANA Cloud Platform we’ve setup in the second blog post of this series.
In this blog post we’ll take care of the missing piece of our application: the user interface for the dashboard. We’ll create a dashboard that can be used to monitor and keep track of the temperature sensors.
Setup the app as an HTML5 app
In a first step we need to create an HTML5 app in your SAP HANA Cloud Platform account. That’s pretty straight forward and for those of you who are used to work with Git this will be a piece of cake.
Initialize your Git settings (for first-time-HTML5-app users)
In case you are creating an HTML5 app on the SAP HANA Cloud Platform you have to provide Git with some metadata first.
If you’ve already used the HTML5 apps on SAP HANA Cloud Platform you can jump to the next chapter around the creation of an HTML5 app in your account.
If you haven’t done that, yet, this is what you need to do:
Create the app in your account
We need to create the app first on our account so that we get a Git repository for the app. Follow these steps:
Task |
Screenshot |
---|---|
1. Open your cockpit for your trial account on SAP HANA Cloud Platform via the link https://account.hanatrial.ondemand.com/cockpit and switch to the HTML5 Applications navigation tab |
![]() |
2. Click first on the button New Application… , enter the application name fishdashboard and click on the Create button. |
|
3. Click on the name of the newly created app | ![]() |
4. Click on the tab Development and copy the link of the Git repository to your clipboard |
Copy the code into your app
With this last step you already have the code of your app in your HTML5 app on your SAP HANA Cloud Platform account. There are now only a few steps missing to have everything up-and-running.
Setup the destination
The last step that is missing is the setup of a destination that the app needs to use. This is necessary due to the Same-Origin-Policy of browsers which don’t let you call a resource in your Javascript-code that is outside of the domain space of your app.
Task | Screenshot |
---|---|
1. Now switch back to your cockpit for your trial account on SAP HANA Cloud Platform and click on your HTML5 app fishdashboard. You should see your commit message above the initial commit. As the neo-app.json file needs a destination you’ll notice that there is a message under the Referecenced Destinations… block telling you that a destination is missing. This is the next task we need to accomplish. |
![]() |
2. Switch to account level on your cockpit and click on the Destinations tab |
![]() |
3. Click on New Destination and provide the details for the destination. Name: fishimportsensordata Type: HTTP Description: Fish import sensor data URL: https://fishimport<your user account ID>.hana.ondemand.com/iotscenario1/ Proxy Type: Internet Cloud Connector Version: 2 Authentication: NoAuthentication At the end click on Save |
![]() |
4. Select again the tab HTML5 Applications, click on your HTML5 app fishdashboard and click on the Development tab. As a result you should see now your new destination listed in your Destinations tab. |
![]() |
7. Now click on the link of the commit message you’ve created and a new tab will be opened in your browser. You should see the app up-and-running and displaying the temperature values in a nice SAPUI5 app. |
![]() |
But the link you’ve clicked on is only accessible to you as the developer of the application. If you want to make it accessible to others we need to version our commit and activate the version.
Create your first version
What you need to do next is to go back to your HTML5 app in the cockpit. At the very right of your commit you’ll find an icon in the column Create Version. Click on that icon, provide a name like 1.0 and click on Add.
Start the dashboard
The last thing you need to do now is to switch to the tab Version Management and click on the symbol in the Activate column for the version you’ve created in the previous step. A popup will show-up and after confirming with clicking on Yes that you want to start the application you can access the app by clicking on the link under Application URL.
Now you can share that link with others and even try out how the app looks like on your smartphone or other devices.
Click on one of the tiles of the app and if you have followed the steps of the first, second and third blog post you can see the chart showing you the last 10 stored temperature values of a sensor that you’ve connected to the RaspberryPi.
What comes next?
We have now our app up-and-running. In the next blog posts will tweak a bit here and there and we’ll look into other aspects of IoT around the SAP HANA Cloud Platform. Stay tuned.
Best,
Rui
Amazing masterpiece with step by step instructions! Well done Rui.
Thanks Twan. Happy you've liked it.
Best,
Rui
Hi Rui,
great blog, much apreciated!!!
Following since November and everything allways works exactly as described.
Looking forward to the next edition!
Henning
Thanks! More is already in the pipeline
Best,
Rui
Hi Rui,
It works like a charm.
The only thing I had to do was to adjust the destination-URL.
Great blog, enjoy following it.
Regards,
Peter
My pleasure Peter!
Best,
Rui
Hello Rui,
Nice work. When I found this blog I was decided in build my first lab using a rPi.
But in my case, almost everything ran like a charm, because my dashboard doesn't show any information. Can you give some help?
Dashboard
https://fishdashboard-s0003975848trial.dispatcher.hanatrial.ondemand.com/
Data from rPi
https://iotscenarios0003975848trial.hanatrial.ondemand.com/iotscenario/
JAVA Dashboard
HTML5 Dashboard
Another thing it's that I cannot add values to other sensors (2, 3, ...). Maybe I have done something wrong.
Joao,
If your servlet is running fine (you're able to create sensors and measures and see the json output), than just copy the servlet URL and paste it in the destination URL used by your HTML5 application.
I can already see that your Java application name is iotscenario when Rui named it fishimport.
Regards,
Didier
Hello Rui!
First at all, much thanks for this great Tutorial.
Now, my problem is this:
I've done all steps of this Tutorial from part1 to this part4, but i never get a sensor value on my Dashboard. I think it is a problem with the Destination but i followed the whole tutorial step by step and can't find the error.
This is the message i get in the my browser:
Thank you for your help!
Regards Mimi
I got the same error, it was because in step 3 the sample URL should refer to the same URL you used for your Java app, e.g. (if my java-app name would be "iotrui0" , and trial user account would be "p1234567890trial" , and the name of the java-project name that i deployed with the iotrui0 HCP server would be "iotscenario" , then the URL in the Destinations file should be:
https://iotrui0p1234567890trial.hanatrial.ondemand.com/iotscenario/
I'm assuming here that you are using an HCP trial account. Whereas the sample URL in step 3 is using hana.ondemand.com (non-trial), and i guess Rui had a java-project he deployed called "iotscenario1" rather than "iotscenario" (which was the initial project name).
Try fixing the Destinations URL, and see if that enables the HTML5 app to look in the right place for your Raspberry Pi's sensor data?
Regards,
-dylan
Thanks Dylan. Exactly what I've also proposed to check.
Best,
Rui
Thanks a lot.
Using as template to have some exploration adventures 🙂
Regards,
/Weiss
Hi,
Thanks for the blog series. It works without any hassles. I was wondering how can business rules be applied to the incoming data. For ex, if a temperature value is above a certain threshold, then show in red/ alert the application user etc. I thought of using Decision tables, but I am getting error when I call the procedure for activation. Another way, I could think of is modifications with the UI5 code. Is there another way I could do it?
I'd appreciate everyone's valuable thoughts.
Thanks and Regards
Hi,
I got the SAPUI5 dashboard deployed to HCP and working a few weeks ago but now when I tried to repeat the process, all I'm getting is a HTTP Status 404 - Not Found page. I was wondering if you knew of a reason that this could be happening?
Thank you,
Tara
Hi Rui,
Great blog, can you show another demo on Raspberry pi using node.js and SAP HCP .
Another demo would be great using node.js for IOT .
Thanks,
Anurag
I guess, I left a message to moderator instead of submitting comment.
I am unable to see the attachments. Can you please attach the index.html and neo-app.json from part 4.
Thank you.
Hi Vaibhav,
Please leave a comment in the future for discrepancies in blogs.  Only the author can fix missing content.  We moderators are busy enough already!  😀
Cheers, Mike (Moderator)
SAP Technology RIG
Understood and agreed!!
Should have seen the complete series. Source code is available in the last post of the series.
https://blogs.sap.com/2015/11/12/part-62-getting-productive-completely/
Thanks!!
BR
VS