Skip to Content

Configuring SAP UI5

We have covered all the steps related to hardware setup and have also configured the backend SAP HANA in our previous blog posts

We’ll configure now the UI which is going to show the sensor information.The UI looks like this impressive ist’t it  😉

SAP HANA IoT Internet of Things: Raspberry, Arduino Uno, XSJS & SAPUI5

This UI is simple and we have kept two tiles

The first tile is showing the value of the sensor ie. the LUX value or light intensity. The small window, below the reading value, tells how the sensor looks like (used custom CSS mapping).

We are going to create a simple view and controller and place the tiles in the view.The tiles will be placed in the tile container and the tile container will be returned inside the content of the page.

There are 3 main component here :

  1. Index.html
  2. View
  3. Controller.

Code for the above components are:Index.html

  1. HANA IoT
  2. <script>// <![CDATA[
  3. sap.ui.localResources(“shiot_ui”); app = new sap.m.App({initialPage:”idshiot_ui1″}); var page = sap.ui.view({id:”idshiot_ui1″, viewName:”shiot_ui_02.shiot_ui_02″, type:sap.ui.core.mvc.ViewType.JS}); app.addPage(page); app.placeAt(“content”);
  4. // ]]></script>
  5. <div id=“splash-screen”>
  6. <div class=“splash-screen-text”>
  7. <div class=“en”>Welcome to HANA IoT Demo</div>
  8. </div>
  9. <div class=“splash-screen-circle-outer”></div>
  10. <div class=“splash-screen-circle-inner”></div>
  11. </div>
  12. <script id=“sap-ui-bootstrap” src=https://sapui5.hana.ondemand.com/resources/sap-ui-core.js data-sap-ui-libs=“sap.m,sap.suite.ui.commons,sap.ui.core,sap.viz” data-sap-ui-theme=“sap_bluecrystal”>// <![CDATA[
  13. // ]]></script>

View:

  1. sap.ui.jsview(“shiot_ui_02.shiot_ui_02”, {
  2. /** Specifies the Controller belonging to this View.
  3. * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.
  4. * @memberOf shiot_ui_02.shiot_ui_02
  5. */
  6. getControllerName : function() {
  7. return “shiot_ui_02.shiot_ui_02”;
  8. },
  9. /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
  10. * Since the Controller is given to this method, its event handlers can be attached right away.
  11. * @memberOf shiot_ui_02.shiot_ui_02
  12. */
  13. createContent : function(oController) {
  14. var content = new sap.suite.ui.commons.NumericContent(“idInRateValue”, {
  15. size: “S”,
  16. scale: “LUX”,
  17. value: “{/value}”,
  18. valueColor: “Good”,
  19. indicator: “{/direction}”
  20. });
  21. var tileContent = new sap.suite.ui.commons.TileContent(“idInTileCont”, {
  22. unit: “”,
  23. size: “L”,
  24. content: [
  25. content
  26. ]
  27. });
  28. var tileInInfo = new sap.suite.ui.commons.GenericTile(“idTileInInfo”, {
  29. header: “In”,
  30. size: “S”,
  31. frameType: “TwoByOne”,
  32. tileContent: [
  33. tileContent
  34. ]
  35. });
  36. var tileCompr = new sap.suite.ui.commons.GenericTile(“idAllGTStatus”, {
  37. header: “Compare Level”,
  38. size: “L”,
  39. scale: “L”,
  40. frameType: “TwoByOne”,
  41. press: function(){
  42. sap.m.MessageToast.show(“Demo”);
  43. },
  44. tileContent: [
  45. new sap.suite.ui.commons.TileContent(“idDaysComprDash”, {
  46. size: “S”,
  47. scale: “S”,
  48. content: [
  49. new sap.suite.ui.commons.ComparisonChart(“idDaysCompr”, {
  50. size: “XS”,
  51. width: “18rem”,
  52. data: [
  53. new sap.suite.ui.commons.ComparisonData({
  54. title: “Maximum Limit”,
  55. value: “{/comparisonValue1}”,
  56. color: sap.suite.ui.commons.InfoTileValueColor.Error
  57. }),
  58. new sap.suite.ui.commons.ComparisonData({
  59. title: “Current”,
  60. value: “{/comparisonValue2}”,
  61. color: sap.suite.ui.commons.InfoTileValueColor.Critical
  62. }),new sap.suite.ui.commons.ComparisonData({
  63. title: “Mimumim Limit”,
  64. value: “{/comparisonValue3}”,
  65. color: sap.suite.ui.commons.InfoTileValueColor.Good
  66. })
  67. ]
  68. })
  69. ]
  70. })
  71. ]
  72. });
  73. tileCompr.addStyleClass(“sapMTile backGroundWhite”);
  74. var custeReading = new sap.m.CustomTile({
  75. content: [
  76. tileContent
  77. ]
  78. });
  79. var custeCompare = new sap.m.CustomTile({
  80. content: [
  81. tileCompr
  82. ]
  83. });
  84. var tileContainer = new sap.m.TileContainer(“idMainTiles”, {
  85. tiles: [
  86. custeReading,
  87. custeCompare
  88. ]
  89. });
  90. //Polling implementation
  91. setInterval(oController.changeKPITest, 1000 * 3);
  92. // create the page holding the List
  93. var page1 = new sap.m.Page({
  94. title: “HANA IoT KPI”,
  95. enableScrolling: false,
  96. content : [
  97. tileContainer
  98. ]
  99. });
  100. return page1;
  101. }
  102. });

Controller:

  1. sap.ui.controller(“shiot_ui_02.shiot_ui_02”, {
  2. /**
  3. * Called when a controller is instantiated and its View controls (if available) are already created.
  4. * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
  5. * @memberOf shiot_ui_02.shiot_ui_02
  6. */
  7. //onInit: function() {
  8. //
  9. //},
  10. /**
  11. * Similar to onAfterRendering, but this hook is invoked before the controller’s View is re-rendered
  12. * (NOT before the first rendering! onInit() is used for that one!).
  13. * @memberOf shiot_ui_02.shiot_ui_02
  14. */
  15. onBeforeRendering: function() {
  16. var data =   {
  17. “value”: 0,
  18. “direction”: “Down”,
  19. “comparisonValue1”: 0,
  20. “comparisonValue2”: 0,
  21. “comparisonValue3”: 0
  22. };
  23. var oModel = new sap.ui.model.json.JSONModel();
  24. oModel.setData(data);
  25. sap.ui.getCore().setModel(oModel);
  26. },
  27. //Triggers automatically for display test
  28. changeKPITest: function(){
  29. /*var min = 0;
  30. var max = 100;
  31. var newRandomreading = Math.floor(Math.random() * (max – min)) + min;*/
  32. var url = http:///demoApp/demo01/app01/services/getSensorReading.xsjs?id=;
  33. var _SENSORID = “A001”;
  34. var _MAXLIMIT = 170;
  35. var _MINLIMIT = 25;
  36. var data =   {
  37. “value”: 0,
  38. “direction”: “Down”,
  39. “comparisonValue1”: _MAXLIMIT,
  40. “comparisonValue2”: 0,
  41. “comparisonValue3”: _MINLIMIT
  42. };
  43. var oModel;
  44. var newColorCode;
  45. //for now hardcoding the sensor ID
  46. url = url + _SENSORID;
  47. //Doing the asyn call to HANA system
  48. jQuery.ajax({
  49. url: url,
  50. async: true,
  51. dataType: ‘json’,
  52. type: ‘GET’,
  53. success: function(oData) {
  54. if (!oData) {
  55. sap.m.MessageToast.show(“Not able to get Data”);
  56. } else {
  57. data[“value”] = oData[“value”];
  58. data[“comparisonValue2”] = oData[“value”];
  59. oModel =  sap.ui.getCore().getModel();
  60. if(oModel.getData()[“comparisonValue2”] > data[“comparisonValue2”]){
  61. data[“direction”] = “Down”;
  62. }else{
  63. data[“direction”] = “Up”;
  64. }
  65. oModel.setData(data);
  66. oModel.refresh();
  67. //changing the color as well
  68. newColorCode = parseInt(data[“value”])*2  ;
  69. if(newColorCode > 255){
  70. newColorCode = 255;
  71. }
  72. $(‘#idInTileCont-footer-text’).css(“background-color”, “rgba(“+newColorCode+“, “+newColorCode+“, “+newColorCode+“, 0.99)”);
  73. }
  74. },
  75. error: function(XMLHttpRequest, textStatus, errorThrown) {
  76. sap.m.MessageToast.show(“Connection not able to establish”);
  77. }
  78. });
  79. },
  80. /**
  81. * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
  82. * This hook is the same one that SAPUI5 controls get after being rendered.
  83. * @memberOf shiot_ui_02.shiot_ui_02
  84. */
  85. //onAfterRendering: function() {
  86. //
  87. //},
  88. /**
  89. * Called when the Controller is destroyed. Use this one to free resources and finalize activities.
  90. * @memberOf shiot_ui_02.shiot_ui_02
  91. */
  92. //onExit: function() {
  93. //
  94. //}
  95. });

Here the controller function changeKPITest is polled every 3 sec and we have the new data bound to model, which is returned from SAP HANA XSJS AJAX call .

It is better to have a push notification feature in here instead of polling which, is called web-sockets, but for simplicity purpose we have kept the configuration minimal.

In part 7, we are tying the loose ends and go-live.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply