SAP HCP-IoT Connecting a UI5 GUI using WebIDE

SAP HANA CLOUD PLATFORM – IOT SERVICES Connecting a UI5 GUI using WebIDE

Aaron Williams / PM SAP HCP & SAP IOT Twitter: @aarondonw, SCN: Aaron Williams Description This tutorial will show you have to set up a table that uses SAP WebIDE System prerequisites • Have an SAP HCP Trial Account • You have completed the “Getting Started with the IoT Services”

Target group • Application developers • People interested in the SAP HANA Cloud

Platform- IoT Services

Target group requirements • Basic programming knowledge.

30 min

Connecting a UI5 GUI using WebIDE

2

Step 1:

Explanation Screenshot

1. Open the SAP HANA Cloud Platform Cockpit and click on Databases & Schemas

2. Click on your iotmms schema- “XXXtrial.iotmms.web”

When you click on it, you should see something like is shown to the right. Note that you have a Shared HANA instance with a binding to your Java Application. We are going to create a HANA XS and then bind our data to our new HANA XS

3. Go back to the Cockpit and click on HANA Instances.

4. Click on “New Trial Instance”

5. Name it “iotmmsxs”


3

You should see something like this:

6. Click on the Databases & Schemas and you will see your new schema

We need to remove the default binding on our XXXtrial.iotmms.web schema.

7. Click xxxtrial.iotmms.web and then click the trash can on the iotmms row

8. Click on iotmmsxs, and click on New Binding.


4

9. For the Java Application, select iotmms

10. Go to the HCP Cockpit, click on Java Applications, and stop the iotmms application (if it is running) and re-start it.

11. Click on the iotmms hyperlink, and then click on the Application URL

12. Then click on Displayed stored messages

You will now see that there are no tables. The underlining table will not be created until you send it some data.

13. Go to Postman or the IoT’s Sample Client and post some data (see SAP HCP IoT tutorial #1)

If you see a message like this from postman, just press send again

You should now see a message like this


5

14. Go back to Display stored messages and hit refresh. You should now see a new table and inside of the table is some data.

Note: the long table name is the true name of the table. Its format is T_IOT_[device type ID]_[message type ID]

We are now ready to start our development

15. Go to the cockpit and click on HANA Instances, then click on SAP HANA Web-based Development Workbench

16. Click on the black arrow next to the green plus and select catalog

17. You will now see the DB schemas. The one named neo_xxxx is the true name of your DB Schema. If you open Tables, you will see your table T_IoT_[device type Id]_[message type]


6

18. Go back to the workbench editor. Right click on iotmmsxs and select Create Application

19. Select Create in selected package, and for the Template, choose Blank Application

A number of files will be created and it should look like this.

20. Add a file named .xsprivileges (under iotmmsxs) and copy and paste the line to the right. Save the file.

{"privileges":[{"name":"Basic","description":"Basic IoT MMS privilege"}]}

21. Add a file named iotaccess.hdbrole (under iotmmsxs) and copy and paste the line to the right. Change it so that it uses your information. Save the file.

Note: this is the Schema name, not the table name.

role <user_id>trial.iotmmsxs::iotaccess { application privilege: <user_id>trial.iotmmsxs::Basic; catalog schema "NEO_<schema_id>": SELECT; }


7

If you look at the right, in my case, the schema begins with NEO_ACP4… while the table is T_IOT_BCB…

22. Add the file iotservice.xsodata and copy and paste the line to the right. Change it so that it uses your information. Save the file.

service { "NEO_<schema_id>"."T_IOT_<table_postfix>" key generate local "GEN_ID"; }

The files should look like this

23. Switch over to the catalog view, and press the SQL button at the top.


8

24. Insert the following and press the green execute button

call "HCP"."HCP_GRANT_ROLE_TO_USER"('<user_id>trial.iotmmsxs::iotaccess', '<user_id>')

This grants your user the role of user for iotmmsxs

25. Go back to the Cockpit and click on HANA XS Applications, and then click on the URL. (if there is no application listed, refresh the cockpit)

You should now see the generic page that was created when we created the index.html file in the workbench

26. Copy the code to the right. 27. Go to the Workbench and

open index.html. 28. Replace the code there,

with the code that you copied.

<!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="UTF-8"/> <title>My Sensor Data</title> <script id='sap-ui-bootstrap' src='/sap/ui5/1/resources/sap-ui-core.js' data-sap-ui-theme='sap_goldreflection' data-sap-ui-libs='sap.ui.core,sap.ui.commons,sap.ui.table'> </script> <script language="JavaScript"> var oModel = new sap.ui.model.odata.ODataModel("/<userID>trial/iotmmsxs/iotservice.xsodata/", false); var arrayHeaders = new Array(); oTable = new sap.ui.table.Table("test",{tableId: "tableID", visibleRowCount:10}); //Bring the table onto the UI oTable.placeAt("sensor_table"); //Table Column Definitions var oMeta = oModel.getServiceMetadata(); var oControl; for ( var i = 0; i < oMeta.dataServices.schema[0].entityType[0].property.length; i++) { var property = oMeta.dataServices.schema[0].entityType[0].property[i]; oControl = new sap.ui.commons.TextField().bindProperty("value",property.name); oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: property.name}), template: oControl, sortProperty: property.name, filterProperty: property.name, filterOperator: sap.ui.model.FilterOperator.EQ, flexible: true, width: "125px" })); } oTable.setModel(oModel); var sort1 = new sap.ui.model.Sorter("C_TIMESTAMP"); oTable.bindRows("/T_IOT_<table_ID>",sort1); </script> </head> <body> <div id="sensor_table"/> </body> </html>

29. Add in your userID at about line 14 and your table’s name at about line 30.

30. Save the file

31. Refresh the web page (or go to the cockpit and click on the URL again). You should now see a table. If you don’t see it, hit refresh a couple of times, the page might not have been posted yet by the server.

At the bottom of this document are some other URLs that you can try to retrieve data in various formats


9

Now lets hook up our other UI to our new XS Application

32. Go back to the Cockpit and select Java Applications make sure your application is stopped

33. Click on the hyper link of your Java Application

34. Click on Data Source Bindings, then click on New Binding

35. Select iotmmsxs as the new binding

36. Click on Overview and start the application

37. Click on the URL in Application URLs. And a new window will open and the graph will be opened with the new data binding.

38. Using postman, add some more data, just to make sure everything is working correctly


10

39. Finally, click on your xs Application to check to see if you see your new data.

Here are some other urls to try

https://<system_id>hanaxs.hanatrial.ondemand.com/<user_id>trial/iotmmsxs/iotservice.xsodata

Look at the URL of the index.html file to get the system_id, the userId is your user ID This gives you the OData Service

https://<system_id>hanaxs.hanatrial.ondemand.com/<user_id>trial/iotmmsxs/iotservice.xsodata/$metadata

This gives you the meta-data

https://<system_id>hanaxs.hanatrial.ondemand.com/<user_id>trial/iotmmsxs/iotservice.xsodata/T_IOT_<table_postfix>

Gives you the table data in XML format

https://<system_id>hanaxs.hanatrial.ondemand.com/<user_id>trial/iotmmsxs/iotservice.xsodata/T_IOT_<table_postfix>?$format=json

Gives you the table data in JSON format


11

Citations/ Acknowledgements This is was based upon a post by Anton Levin of our HCP Development team out of Walldorf, Germany. The IoT Services Starter Kit was posted by Michael Ameling and the IoT Services Starter Kit. I also got a lot of help from Philip Mugglestone of the Hana Academy team.

© 2014 SAP SE or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.

Engineering

SAP HCP-IoT Connecting a UI5 GUI using WebIDE