Académique Documents
Professionnel Documents
Culture Documents
1. Create an SAPUI5 application project in Eclipse IDE with a view and controller.
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.
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""
</script>
Step 4: Double click on the “index.html” Copy and paste the below code.
<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
/* Step 3: creating a viz control Bar graph to get the graphs as frame in the
application */
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*/
});
/* Step 5 :Defining the model for Pie graph, JSON Model Creation */
]});
/* Step 6: creating a viz control Pie graph to get the graphs as frame in the
application */
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*/
data :{path:"/data"}
});
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.*/