1. Create New SAPUI5 Mobile Project
Select File -> New -> Project
Select Application Project under SAPUI5 Application Development
Enter name of the project as "MyDashboard", select target device as "Mobile" and click Next
Enter name of first view as "Home", Development Paradigm as "Javascript" and click Finish.
2. Create a new folder for images
Right click on "WebContent" folder and select New -> Folder
Enter Folder name as "images" and click Finish.
3. Import images.
Copy required images (Home_Title.jpg, R1.jpg, R2.jpg and R3.jpg) under images folder created in step 2.
4. Create views
Right click on "MyDashboard" and select New -> View
Enter view name as "R1" and click Finish.
Similarly create two more views "R2" and "R3". After creating all the three views, project structure will be as below:
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:
- SAP Managed Tags:
8 Comments
