Skip to Content

1. Create New SAPUI5 Mobile Project


Select File -> New -> Project

/wp-content/uploads/2013/10/1_290689.jpg

Select Application Project under SAPUI5 Application Development

/wp-content/uploads/2013/10/2_290699.jpg

Enter name of the project as “MyDashboard”, select target device as “Mobile” and click Next

/wp-content/uploads/2013/10/3_290700.jpg

Enter name of first view as “Home”, Development Paradigm as “Javascript” and click Finish.

/wp-content/uploads/2013/10/4_290701.jpg

2. Create a new folder for images

Right click on “WebContent” folder and select New -> Folder

/wp-content/uploads/2013/10/5_290705.jpg

Enter Folder name as “images” and click Finish.

/wp-content/uploads/2013/10/6_290706.jpg

3. Import images.

Copy required images (Home_Title.jpg, R1.jpg, R2.jpg and R3.jpg) under images folder created in step 2.

/wp-content/uploads/2013/10/11_290707.jpg

/wp-content/uploads/2013/10/7_290710.jpg

/wp-content/uploads/2013/10/8_290708.jpg/wp-content/uploads/2013/10/9_290709.jpg/wp-content/uploads/2013/10/10_290711.jpg

4. Create views

Right click on “MyDashboard” and select New -> View

/wp-content/uploads/2013/10/12_290819.jpg


Enter view name as “R1” and click Finish.

/wp-content/uploads/2013/10/13_290820.jpg

Similarly create two more views “R2” and “R3”. After creating all the three views, project structure will be as below:

/wp-content/uploads/2013/10/14_290821.jpg

5. Code Snippet

Copy below code snippets in respective javascript files:

Index.html

<!DOCTYPE HTML>

<html>

          <head>

                   <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

                   <script src=“resources/sap-ui-core.js”

                                      id=“sap-ui-bootstrap”

                                      data-sap-ui-libs=“sap.m, sap.makit”

                                      data-sap-ui-theme=“sap_mvi”>

                   </script>

                   <!– only load the mobile lib “sap.m” and the “sap_mvi” theme –>

                   <script>

                                      sap.ui.localResources(“mydashboard”);

                                      var app = new sap.m.App({initialPage:“Home”});

                                      var page_Home = sap.ui.view({id:“Home”, viewName:“mydashboard.Home”, type:sap.ui.core.mvc.ViewType.JS});

                                      var page_R1 = sap.ui.view({id:“R1”, viewName:“mydashboard.R1”, type:sap.ui.core.mvc.ViewType.JS});

                                      var page_R2 = sap.ui.view({id:“R2”, viewName:“mydashboard.R2”, type:sap.ui.core.mvc.ViewType.JS});

                                      var page_R3 = sap.ui.view({id:“R3”, viewName:“mydashboard.R3”, type:sap.ui.core.mvc.ViewType.JS});

                                      app.addPage(page_Home).addPage(page_R1).addPage(page_R2).addPage(page_R3);

                                      app.placeAt(“content”);

                   </script>

          </head>

          <body class=“sapUiBody” role=“application”>

                   <div id=“content”></div>

          </body>

</html>

Understanding the Code:

  • sap.makit library is imported
  • app and pages are created and finally pages are added to app

Home.View

   sap.ui.jsview(“mydashboard.Home”, {

          /** Specifies the Controller belonging to this View.

          * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

          * @memberOf mydashboard.Home

          */

          getControllerName : function() {

                   return “mydashboard.Home”;

          },

          /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

          * Since the Controller is given to this method, its event handlers can be attached right away.

          * @memberOf mydashboard.Home

          */

          createContent : function(oController) {

                   var imageTitle = new sap.m.Image({src: “images/Home_Title.jpg”, width: “20em”, height: “10em”, layoutData: new sap.m.FlexItemData({growFactor: 1})});

                   var imageR1 = new sap.m.Image({src: “images/R1.jpg”, width: “6.66em”, height: “10em”, layoutData: new sap.m.FlexItemData({growFactor: 1}),

                             press: function(){

                                      app.to(page_R1, “flip”);

                             }

                   });

                   var imageR2 = new sap.m.Image({src: “images/R2.jpg”, width: “6.66em”, height: “10em”, layoutData: new sap.m.FlexItemData({growFactor: 1}),

                             press: function(){

                                      app.to(page_R2, “flip”);

                             }

                   });

                   var imageR3 = new sap.m.Image({src: “images/R3.jpg”, width: “6.66em”, height: “10em”, layoutData: new sap.m.FlexItemData({growFactor: 1}),

                             press: function(){

                                      app.to(page_R3, “flip”);

                             }

                   });

                  

                   var hbox1 = new sap.m.HBox({

                             items: [imageTitle],

                             alignItems : sap.m.FlexAlignItems.Center

                   });

                   var hbox2 = new sap.m.HBox({

                             items: [imageR1, imageR2, imageR3],

                             alignItems : sap.m.FlexAlignItems.Center

                   });

                   var vbox1 = new sap.m.VBox({

                             items: [hbox1, hbox2],

                             alignItems : sap.m.FlexAlignItems.Center

                   });

                   return vbox1;

          }

});

Understanding the Code:

  • Hbox1 contains title image
  • Hbox2 contains icon images
  • Vbox1 contains Hbox1 and Hbox2 and is finally returned

R1.View

     sap.ui.jsview(“mydashboard.R1”, {

          /** Specifies the Controller belonging to this View.

          * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

          * @memberOf mydashboard.R1

          */

          getControllerName : function() {

                   return “mydashboard.R1”;

          },

          /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

          * Since the Controller is given to this method, its event handlers can be attached right away.

          * @memberOf mydashboard.R1

          */

          createContent : function(oController) {

                   var rPage = new sap.m.Page({

                             title: “Report R1”,

                             showNavButton: true,

                             navButtonTap: function()

                             {

                                      app.to(page_Home);

                             }});

                   var myModel = oController.getMyModel(2,3,14);

                   var myChart = oController.createMyChart(“R1Chart”, “R1 Chart”, myModel);

                   rPage.addContent(myChart);

                   return rPage;     

          }

  });

Understanding the Code:

  • Data Model is retrived by calling method getMyModel from Controller
  • Chart is created by calling createMyChart method from Controller
  • Finally Chart is added to Page and the page is returned

R1.Controller

sap.ui.controller(“mydashboard.R1”, {

          getMyModel: function(a1,a2,a3) {

                   var data = [ {

                             type : “New”,

                             tickets : a1

                   }, {

                             type : “Assigned”,

                             tickets : a2

                   }, {

                             type : “WIP”,

                             tickets : a3

                   } ];

                   var model = new sap.ui.model.json.JSONModel();

                   model.setData(data);

                   return model;

          },

          createMyChart: function(id, title, model) {

                   var oChart = new sap.makit.Chart({

                             width : “100%”,

                             height: “79%”,

                             type : sap.makit.ChartType.Column,

                             showRangeSelector : false,

                             showTotalValue : true,

                             valueAxis: new sap.makit.ValueAxis({}),

                             categoryAxis: new sap.makit.CategoryAxis({}),

                             category : new sap.makit.Category({

                                      column : “type”

                             }),

                             values : [new sap.makit.Value({

                                      expression : “tickets”,

                                      format : “number”

                             })]

                   });

                   oChart.addColumn(new sap.makit.Column({name:“type”, value:“{type}”}));

                   oChart.addColumn(new sap.makit.Column({name:“tickets”, value:“{tickets}”, type:“number”}));

                   oChart.setModel(model);

                   oChart.bindRows(“/”);

                   return oChart;

          }

  });

Understanding the Code:

  • getMyModel method creates dummy data for the chart
  • createMyChart method creates a chart. Notice chart type as “Column”

Similarly add below code for views R2 and R3. The only difference in the R2 and R3 Controllers is Chart type, which is Donut and Bar in R2 and R3 respectively.

R2.View

sap.ui.jsview(“mydashboard.R2”, {

          /** Specifies the Controller belonging to this View.

          * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

          * @memberOf mydashboard.R2

          */

          getControllerName : function() {

                   return “mydashboard.R2”;

          },

          /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

          * Since the Controller is given to this method, its event handlers can be attached right away.

          * @memberOf mydashboard.R2

          */

          createContent : function(oController) {

                   var rPage = new sap.m.Page({

                             title: “Report R2”,

                             showNavButton: true,

                             navButtonTap: function()

                             {

                                      app.to(page_Home);

                             }});

                   var myModel = oController.getMyModel(2,3,14);

                   var myChart = oController.createMyChart(“R2Chart”, “R2 Chart”, myModel);

                   rPage.addContent(myChart);

                   return rPage;

          }

  });

R2.Controller

sap.ui.controller(“mydashboard.R2”, {

          getMyModel: function(a1,a2,a3) {

                   var data = [ {

                                                type : “New”,

                                                tickets : a1

                                      }, {

                                                type : “Assigned”,

                                                tickets : a2

                                      }, {

                                                type : “WIP”,

                                                tickets : a3

                                      } ];

                   var model = new sap.ui.model.json.JSONModel();

                   model.setData(data);

                   return model;

          },

          createMyChart: function(id, title, model) {

                   var oChart = new sap.makit.Chart({

                             width : “100%”,

                             height: “70%”,

                             type : sap.makit.ChartType.Donut,

                             showRangeSelector : false,

                             showTotalValue : true,

                             valueAxis: new sap.makit.ValueAxis({}),

                             categoryAxis: new sap.makit.CategoryAxis({}),

                             category : new sap.makit.Category({

                                      column : “type”

                             }),

                             values : [new sap.makit.Value({

                                      expression : “tickets”,

                                      format : “number”

                             })]

                   });

                   oChart.addColumn(new sap.makit.Column({name:“type”, value:“{type}”}));

                   oChart.addColumn(new sap.makit.Column({name:“tickets”, value:“{tickets}”, type:“number”}));

                   oChart.setModel(model);

                   oChart.bindRows(“/”);

                   return oChart;

          }

  });

R3.View

sap.ui.jsview(“mydashboard.R3”, {

          /** Specifies the Controller belonging to this View.

          * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

          * @memberOf mydashboard.R3

          */

          getControllerName : function() {

                   return “mydashboard.R3”;

          },

          /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

          * Since the Controller is given to this method, its event handlers can be attached right away.

          * @memberOf mydashboard.R3

          */

          createContent : function(oController) {

                   var rPage = new sap.m.Page({

                             title: “Report R3”,

                             showNavButton: true,

                             navButtonTap: function()

                             {

                                      app.to(page_Home);

                             }});

                   var myModel = oController.getMyModel(2,3,14);

                   var myChart = oController.createMyChart(“R3Chart”, “R3 Chart”, myModel);

                   rPage.addContent(myChart);

                   return rPage;

          }

  });

R3 Controller

sap.ui.controller(“mydashboard.R3”, {

          getMyModel: function(a1,a2,a3) {

                   var data = [ {

                                                type : “New”,

                                                tickets : a1

                                      }, {

                                                type : “Assigned”,

                                                tickets : a2

                                      }, {

                                                type : “WIP”,

                                                tickets : a3

                                      } ];

                   var model = new sap.ui.model.json.JSONModel();

                   model.setData(data);

                   return model;

          },

          createMyChart: function(id, title, model) {

                   var oChart = new sap.makit.Chart({

                             width : “100%”,

                             height: “79%”,

                             type : sap.makit.ChartType.Bar,

                             showRangeSelector : false,

                             showTotalValue : true,

                             valueAxis: new sap.makit.ValueAxis({}),

                             categoryAxis: new sap.makit.CategoryAxis({}),

                             category : new sap.makit.Category({

                                      column : “type”

                             }),

                             values : [new sap.makit.Value({

                                      expression : “tickets”,

                                      format : “number”

                             })]

                   });

                   oChart.addColumn(new sap.makit.Column({name:“type”, value:“{type}”}));

                   oChart.addColumn(new sap.makit.Column({name:“tickets”, value:“{tickets}”, type:“number”}));

                   oChart.setModel(model);

                   oChart.bindRows(“/”);

                   return oChart;

          }

  });

6. Run Dashboard

Dashboard can be tested by running Index.html as “Web App Preview” or “On Server”

http://localhost:8080/MyDashboard/index.html?sap-ui-xx-fakeOS=ios

Note: Don’t forget to add URL parameter sap-ui-xx-fakeOS=ios for ios device and sap-ui-xx-fakeOS=android for android devices.

Below are the screenshots of final dashboard:

/wp-content/uploads/2013/10/15_290831.jpg

/wp-content/uploads/2013/10/16_290832.jpg

/wp-content/uploads/2013/10/17_290833.png

/wp-content/uploads/2013/10/18_290834.jpg

To report this post you need to login first.

8 Comments

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

  1. Vidya Goruganthu

    Hi Gaurav,

    Thanks for sharing this excellent article. It runs & looks great on my chrome browser. I noticed leaving the view or controller layout and pasting the necessary functions where ever applicable display results correctly. As sap /eclipse or addins installation on every machine is different.

    And coming display on ios and android. I’m unable to view on ipad or android device. the link dosen’t work , is this because of localhost . Do suggest.

    Thanks,

    Vidya

    (0) 
  2. Margaret Jaco

    Hi Gaurev,

    I can’t seem to find the Home Controller code for this sample dashboard. Can you please send a link as to where to find it or the inline code. Thanks,

    Margaret.

    (0) 

Leave a Reply