Additional Blogs by SAP
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member
8,581




The goal of this blog post is to share a SAPUI5 dashboard that I have built in the HANA Cloud Platform (HCP) using the SAP Web IDE to extend the SensorPhone application from another blog post. Within a few minutes, you will be able to visualize the sensor data that is streaming from your iPhone to HCP. Please check out Pat Colucci's SensorPhone blog post here.

 

Before we get started, here is what you will need:

  • The iOS SensorPhone app - version 1.3.2

  • iotmms, configured to the instructions outlined in the SensorPhone tutorial

  • HCP account

  • The DashboardInCloud.zip and iotmms file, located here.


 

Step 1: Save the iotmms Table Name

If you have followed the SensorPhone tutorial, you should be able to view the sensor data in the HCP iotmms. To open the iotmms, select Java Applications in the HCP side panel. The iotmms should already be deployed. Select iotmms to open the iotmms overview page.



The Application URL should now be displayed. Select the URL to launch the iotmms application. Note: The service must be started in order for this step to work.



Select the Display stored messages tile.



A list of the existing table names are displayed. One of the tables should contain your sensor data. The table was automatically generated from your first HTTP Post in the SensorPhone tutorial. Select the table that contains the iPhone sensor data.



Copy the table name. Note: Only copy the text that begins with T_IOT_. You do not need the part that begins with NEO_.



You can also find the table name by selecting OData API, located at the top right of the table. By clicking the URL, you will open a new tab and find the table name in the first <id></id> tag, shown below. Save this table name because it will be necessary to access the data in the dashboard application.



Step 2: Create IoT Destination

Creating a destination will allow you to access the data within the Message Management Service (mms) in HCP.

 

Select Destinations in the HCP side panel, then select either New Destination or Import Destination.



You can manually enter all of the table data or use the iotmms file to import the destination settings. Please do not change the name of this destination.  Update the URL ( https://iotmms<userID>trial.hanatrial.ondemand.com/) to include your I-number or P-number. Entering the HCP username/password under Authentication will allow you to access the destination from the dashboard without having to constantly reenter your username/password.



Hit Save and then Check Connection. If everything was entered correctly, you should receive a popup message that indicates a successful connection.



Step 3: Import the Dashboard to SAP Web IDE

To open SAP Web IDE, please select the Services option on the HCP side panel. Scroll down to the SAP Web IDE tile. Enable this service if you have not done so already. Select the SAP Web IDE tile and then select the Open SAP Web IDE link.





Within SAP Web IDE, select the Workspace folder and right click to view the available options. Select Import > From File System. Navigate to the DashboardInCloud.zip file. You can download the zip file here.



After the file has been imported to the SAP Web IDE, select the index.html file and then select the Run icon.



A new tab should open with the settings page. Enter the table name from Step 1 and then select the desired refresh rate. If you are not streaming any data from the SensorPhone application, leave the refresh rate as Just Once. If you are streaming data from the SensorPhone application, select the matching refresh rate and the chart will update automatically. Selecting the Start button will pull the data from the mms, using the destination, and will display the top 30 values in a table.



The example table below only has 3 rows of data. Select the View Chart option in the top left of the screen to visualize the sensor data.



Currently, the chart is only showing the accelerometer data from the iPhone, but this can be easily changed to include other values.



If you are streaming data from the SensorPhone app or manually publishing the data from the iotmms, select a refresh rate other than Just Once and the chart will update automatically.



 

Final Thoughts

The HANA Cloud Platform provides users with a complete set of tools and services to develop virtually any IoT project. In the SensorPhone tutorial, you were able to easily create device types and messages to collect sensor data in HCP. Using the same platform, you are now able to visualize the data from your devices. The project can be easily extended to integrate with core ERP modules, such as SAP Plant Maintenance. For example, rules could be setup to trigger events within the PM module to create a Work Order or Notification.

 

 

 

Anthony McLeod

LinkedIn

38 Comments
Former Member
0 Kudos

Great post, Anthony! This is perfect for anyone looking for a dashboard with their SensorPhone app.

Former Member
0 Kudos

Thank you, Pat!

glenn_sawyer
Advisor
Advisor
0 Kudos

Very cool app.  We should take a moment to recognize Pat Colucci small contribution.  The magic all happens RIGHT HERE on the Analytics side.

Thanks Anthony.  Please keep them coming

Former Member
0 Kudos

Very good.

Thanks a lot. :smile:

Former Member
0 Kudos

Thanks, Nilton!

Former Member
0 Kudos

Thanks, Glenn!

HenrikBruentrup
Explorer
0 Kudos

Great tutorial. Unfortuntely I am getting an HTTP 404 - Error when trying to call my table.

"Failed to load resource: the server responded with a status of 404 (Not Found)"

I imported the destination as suggested and the connection test is successful.

I do use different message types, as for example "accX" instead of your "AccelerometerX". However, I do not think this is the issue?

Any suggestions?

Former Member
0 Kudos

Hi Henrik,

Thank you for checking out the tutorial. The issue may be due to the name change in the message. To fix this, you can edit the {C_ACCELEROMETERX} in the "Main.view.js" file in the "view" folder. You will also have to change the Y and Z values.

For the table:

The original code:

var oCellX = new sap.m.Text({

  text: "{C_ACCELEROMETERX}"

  });

The new code:

var oCellX = new sap.m.Text({

  text: "{C_ACCX}"

  });

For the chart:

The original code:

measures: [

                {

                name: "AccelerometerX",

                    value: "{C_ACCELEROMETERX}"

                },

The new code:

measures: [

                {

                name: "AccelerometerX",

                    value: "{C_ACCX}"

                },


Note: Do not change the "name" in the chart measure since it is used elsewhere.


Please let me know if this helps.

-Anthony

Jean-Philippe
Participant
0 Kudos

Great post and tutorial Anthony. Unfortunately, I am stuck as it doesn't display anything from my IoT table. No error message either. Destination is working well.

All previous steps are done and working correctly also (collecting data from App,...).

Since I don't have any error messages,it is quite annoying for investigation.

In fact, I can put whatever I want in the table name, it doesn't do anything or say anything.

Would you have any suggestions where should I look ?

EDIT : only error I see is :

1:10:32 PM (git) Cannot add Git ignore Cannot read property 'getContent' of null

1:10:32 PM (git) .gitignore was not updated

but not sure it is relevant.

Thanks

Former Member
0 Kudos

Hi Jean-Philippe,

Firstly, thanks for checking out the blog/tutorial.

Have you updated the application recently? I know the SensorPhone application was updated a few months ago to change the message fields. If you are experiencing the issue with the most up to date app version, feel free to send me a screenshot of the table in the IoT service. I can use this as a starting point to debug the issue.

Kind regards,

Anthony

anthony.mcleod@sap.com

Jean-Philippe
Participant
0 Kudos

Hi Anthony,

Thank you for your answer.

FYI - I have downloaded the application last week so I think I have the last ´version.

Table :

table code :

In Web IDE, whatever I am setting in table field, it doesn't work.

Former Member
0 Kudos

Hi Jean-Philippe,


Can you also send a screenshot of the destination configuration? Just an FYI, the table will not display any data if you select "view table" without first hitting "Start".


Regards,

Anthony

Jean-Philippe
Participant
0 Kudos

Hi Anthony,

I know I need to push the start button. But like I said previously, it is like the application is not fetching a thing.

That is my destination. And it is working when I am testing it.

Only error I see in this message but I don t know if it is relevant n SAP web IDE after launching index.html

:

9:25:49 AM (git) Cannot add Git ignore Cannot read property 'getContent' of null

9:25:49 AM (git) .gitignore was not updated

Former Member
0 Kudos

Hi Jean-Philippe,


I am still looking into this issue. I don't know if the git message is related. I have tested it on other accounts and could not replicate the error message. I hope to create a newer version of the dashboard in the near future.


-Anthony

Jean-Philippe
Participant
0 Kudos

Hi Anthony,

I think it comes from this GIT error as I cannot get content from the table. I will try to debug it.

Thanks anyway for your help and good work on this application and tutorial !

Vitaliy-R
Developer Advocate
Developer Advocate
0 Kudos

I know it does not help much, but I just done all these steps in my account and in my case it works :smile:

Jean-Philippe
Participant
0 Kudos

It seems that I have an error in Main.Controller.js on an harcoded URL. Now why only me ? That I don t know.

Vitaliy-R
Developer Advocate
Developer Advocate
0 Kudos

Using the app to visualize elevation profile of my yesterday's ride from Wrocław to Warsaw:

Thanks!

Former Member
0 Kudos

Hi Brandon,

Thanks for checking out the blog. The table is currently setup to show 3 accelerometer values and audio. The chart does not have the audio value setup. You can easily add it to the chart by editing the Main.view.js file.

You can add the following object to the end of the measures array:

{

     name: "Audio",

     value: "{C_AUDIO}"

}

It will go after the AccelerometerZ object (please add a comma before adding the audio object) so the measures array will then look like:

You will also have to add "Audio" to the values array in the feedValueAxis variable. Here is what it should look like after the change:

Hope this helps and please let me know if you have any other questions.

Regards,

Anthony

Former Member
0 Kudos

Hi Brandon,

Glad to hear you were able to get the audio to work!

Not exactly sure why the table or chart is not displaying the other three accelerometer values. Does the table in the IoT service display data for the accelerometers? I would also just check that the column names match my screenshot below. These fields are from Pat Colucci's blog post are automatically converted to uppercase and begin with "C_". The chart and table are hard coded to work with these field names. I am working on a version that will bring in the column names for a future blog post

Regards,

Anthony

HenrikBruentrup
Explorer
0 Kudos

Hi Anthony,

unfortunately it did not.

Following along the tutorial, this time using your message types, I receive the following error (which is the same error as when using my own message types):

Any idea?

Best regards,

Henrik

Former Member
0 Kudos

Hi Henrik,

I am looking into the issue . Some people are experiencing similar problems. I am currently working on an updated version of the dashboard that may fix some of these problems.

Regards,

Anthony

david_lincourt
Product and Topic Expert
Product and Topic Expert
0 Kudos

Thanks for this great blog. It was part of the inspiration for a simple app that displays the Heat Stress Index. I blogged about it here: It's hot out here!

heilerm
Associate
Associate
0 Kudos

just a little comment.

In my case the data where sent from my iPhone to the HCP but not displayed in the dashboard.

The reason we found out in debugging mode (network) was an error 202. The reason was that I have copied the table name T_IOT.... with a trailing blank.

So the application is very sensitive on that. So don't have a trailing blank in the table name.

Former Member
0 Kudos

Thank you Anthony. Was excited to see something working perfect the first time.

Great blog. Please keep it coming.

Former Member
0 Kudos

Thanks Chinnaiah!

Former Member
0 Kudos

Hi Jean,

I am also experiencing the same problem. Did you got any solution?

Thanks

andreasmarte
Explorer
0 Kudos
thanks !

my scenario is a bit different with a ublox sensor, connected over bluetooth to iphone and HCP. Data connection to HCP works.
i want to add some other values with the column name from the HCP table in the file Main.view.js, equal to your column config, but the file only shows your created column
Do i need to change some parts of the program ?
andreasmarte
Explorer
works now, refreshing browser cache helps ...
Former Member
Hi Andreas,

Glad you were able to get it to work. If you deploy your application on HCP and update it afterwards, you may have to clear your cache as you have indicated. I have found that this issue occurs only for deployed applications.

You can change the column names in the Main.view.js file. You will have to update both the table and the chart control separately. For the chart, you would have to change the oDataset measures and the values in the feedValueAxis object.

Regards,
Anthony
AaronLong
Product and Topic Expert
Product and Topic Expert
0 Kudos
Hi Anthony,
I got http 500 error。
then some fields of the table got displayed.  then show no data.
the iotmms application's http access log show no 500 entry.

what could be the problem?

thanks & Best Regards,
Aaron

===============================================================
sap-ui-core.js:126 GET https://webidetesting7965700-i029837trial.dispatcher.hanatrial.ondemand.com…/T_IOT_849FFC44A70098761... 500 (Internal Server Error)
========================================
the iotmms application's http access log show no 500 entry.
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:27:17 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:27:17 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 149 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:28:16 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:28:16 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 38 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:29:13 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:29:13 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 25 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:30:11 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:30:12 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 154 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:31:09 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:31:09 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 52 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.19 (155.56.219.16) - - [10/Nov/2016:08:32:07 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.19 (155.56.219.16) - - [10/Nov/2016:08:32:07 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 40 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.19 (155.56.219.16) - - [10/Nov/2016:08:33:05 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.19 (155.56.219.16) - - [10/Nov/2016:08:33:06 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 153 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:34:03 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:34:03 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 35 iotmmsi029837trial.hanatrial.ondemand.com:443
Former Member
0 Kudos
Hi Aaron,

I am not sure exactly what is causing that issue but we can test the connection to the table to ensure that the data is being delivered to the application. If you go to the IoT MMS and select the Displayed stored messages tile you will see a list of tables. One of the tables will include all of your data from the sensor phone application. If you select the table, you will see a "OData API" button in the top right of the screen. The link will have the following format:

https://iotmms<I/P number>trial.hanatrial.ondemand.com/com.sap.iotservices.mms/v1/api/http/app.svc/<SCHEMA & TABLE NAME>

Please copy everything after "...hanatrial.ondemand.com", which will leave you with "/com.sap..."



In the WEBIDE, run your application and make the following changes to the URL:

1. Delete everything after "...hanatrial.ondemand.com/".



2. Add the name of your destination, which would be "iotmms" if you used the same destination name as indicated in this blog.

3. Then paste the part of the URL that you copied from the IoT MMS.



The page should display all of the data that is in your table. If you cannot see the data from your table, I would recommend deleting and recreating your destination.

Regards,
Anthony
Alfredo_Lagunar
Participant
0 Kudos
Hi Anthony,
Great blog!! When I try to download the DashboardInCloud.zip from the url I have a message with the content has expired.

Can you renew?

Regards,
Former Member
0 Kudos
Hi Alfredo,

Thanks for letting me know. I have updated the share folder details and you should be able to access the contents.

Regards,
Anthony
Alfredo_Lagunar
Participant
0 Kudos
Hi Anthony,
Now it is working.  Thanks for sharing.

Regards,

Alfredo
Former Member
0 Kudos
Thank's & Respect Sir

Former Member
Really great Job. Unfortunately, the access to the folder with the DashboardInCloud.zip and iotmms file is expired. Can reactivate it? I would love to rebuild your usecase.

 

Best regards

Dennis
DanieSmit
Employee
Employee
0 Kudos
Just to say thank you.  I've just completed this tutorial and everything is still working!!