Step-by-Step Procedure
1. Create an SAPUI5 application project in Eclipse IDE with a view and controller.
Create a project new
projectsapui5 applciation project
Project Name : BarGraph (Name of the project)
By clicking the next from the above screen->page navigates to creation of ViewName – Main Finish
Project Structure after the creation
Step2: Run index.html you should able to see app view with title as header in it as below.
Step 3. Double click on the “index.html” ,understanding the code in Index.html
Bootstrap: Important functionality for the application to load the program with
entire properties.
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js""
id="sap-ui-bootstrap" = ID for the application design
data-sap-ui-libs="sap.viz,sap.ui.layout,sap.m" = Libraries used
in the application
data-sap-ui-theme="sap_bluecrystal"> = specifies &
load the theme , more themes are available with the sapui5 api’s/
</script>
Step 4: Double click on the “index.html” Copy and paste the below code.
From <Head> tags ending with </Head>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-
8'/>
<!--<script src="resources/sap-ui-core.js"-->
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-
core.js""
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.viz,sap.ui.layout,sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal"
theme -->
<script>
sap.ui.localResources("bargraph");
var app = new sap.m.App({initialPage:"idMain1"});
var page = sap.ui.view({id:"idMain1",
viewName:"bargraph.Main", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
Step 5: Designing the Ui controls, Bar graph,Buttons in view.jsDouble click Main.view.js
(Designing as per the step wise procedure inside the view.js)
createContent: function(oController) {
/* Step 1: Desiging the layout*/
var oLayoutforCharts = new sap.ui.layout.HorizontalLayout
({
id : "matrix",
layoutFixed : true,
columns : 2,
width : "100%",
widths : [ "50%", "50%" ]
});
/* Step 2 :Defining the model, JSON Model Creation */
var oModel = new sap.ui.model.json.JSONModel
({
data : [{month:'Sep', Accenture : "10", Deloitte : "20",
Tcs :"70"},
{month:'Oct', Accenture : "10", Deloitte : "20",
Tcs :"30"},
{month:'Nov', Accenture : "30", Deloitte : "20",
Tcs :"30"},
{month:'Dec', Accenture : "15", Deloitte : "25",
Tcs :"60"}
]});
/* Step 3: creating a viz control Bar graph to get the graphs as frame in the
application */
var oColumnChart = new sap.viz.ui5.controls.VizFrame();
oColumnChart.setVizProperties({
title: {
text: "Bar Graph"}
});
oColumnChart.setDataset(datasetforColumnChart);
oColumnChart.setModel(oModel);
oColumnChart.setVizType('stacked_column');
oColumnChart.addFeed(feedValueAxis);
oColumnChart.addFeed(feedCategoryAxis);
/* Step 4:Defining the data feed for the viz control graphs*/
var datasetforColumnChart = new sap.viz.ui5.data.FlattenedDataset
({
dimensions : [ { axis : 1,
name : 'Month',
value : "{month}"} ],
measures : [ {name : "Accenture", value :
'{Accenture}'},
{name : "Deloitte", value : '{Deloitte}'},
{name : "Tcs", value : '{Tcs}'} ],
data : {path:"/data"}
});
var feedValueAxis = new
sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Accenture","Deloitte","Tcs"]
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Month"]
});
/* Step 5 :Defining the model for Pie graph, JSON Model Creation */
var pieModel = new sap.ui.model.json.JSONModel
({
data : [{name : "Accenture" ,value : "65"},
{name : "Deloitte", value : "85"},
{name : "Tcs",value :"190"}
]});
/* Step 6: creating a viz control Pie graph to get the graphs as frame in the
application */
var oPieChart = new sap.viz.ui5.controls.VizFrame();
oPieChart.setDataset(datasetforPieChart);
oPieChart.setVizProperties({
title: {
text: "Pie Chart"}
})
oPieChart.setModel(pieModel);
oPieChart.setVizType('pie');
oPieChart.addFeed(feedSize);
oPieChart.addFeed(feedColor);
/* Step 7:Defining the data feed for the viz control Pie graphs*/
var datasetforPieChart = new sap.viz.ui5.data.FlattenedDataset
({
dimensions : [ { name : 'name',
// axis : 1,
value : "{name}"} ],
measures : [ {name : "value", value : '{value}'},
// {name : "Deloitte", value : '{Deloitte}'},
// {name : "Tcs",value : '{Tcs}'},
],
data :{path:"/data"}
});
var feedSize = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "size",
'type': "Measure",
'values': ["value"]
}),
feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["name"]
});
/* Step 8:To get the controls output, values needs to be returned
to the page, adding the layout to the graphs*/
return new sap.m.Page({
title: "Project Approval",
content: [
oLayoutforCharts.addContent(oColumnChart),
oLayoutforCharts.addContent(oPieChart),
],
/* Step 9: Result */
/* Optional Step 10: Additonal buttons added to the footer to get the desired
results for the button actions.*/
footer : new sap.m.Bar
({
active:true,
contentRight : [new sap.m.Button
({text : "Add Comment",
type : "Emphasized",
press : oController.addCommentMessage,
icon : "sap-icon://add",
}),
new sap.m.Button
({text : "Approved",
press : oController.approveMessage,
type : "Emphasized"}),
]})
});
}
