<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{"view": "./"}'
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script>
sap.ui.localResources("view");
var app = new sap.m.App({
initialPage: "idMain"
});
var page = sap.ui.view({
id: "idMain",
viewName: "view.Main",
type: sap.ui.core.mvc.ViewType.XML
});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
# SAPUI5 MVC example with JSON file databinding
This is a simple MVC example where we load JSON data from an external file
and then bind this data against a table.
This example is based on:
[SAPUI5 Demokit Tables](https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/sample)
<core:View
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:viz="sap.viz.ui5.controls"
xmlns:l="sap.ui.layout"
controllerName="view.Main"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page
title="Page"
class="marginBoxContent" >
<content>
<l:Grid id="gridHeader" defaultSpan="XL3 L4 M6 S12">
<l:content>
<viz:VizFrame id="idChart1"
width="100%">
<viz:layoutData> <l:GridData span="L12 M12 S12" /> </viz:layoutData>
</viz:VizFrame>
<viz:VizFrame id="idChart2"
width="100%">
</viz:VizFrame>
<viz:VizFrame id="idChart3"
width="100%">
</viz:VizFrame>
</l:content>
</l:Grid>
</content>
</Page>
</core:View>
sap.ui.controller("view.Main", {
onInit: function() {
// Chart
this.renderChartAllEvents("idChart1");
this.renderChartAllEvents("idChart2");
this.renderChartAllEvents("idChart3");
},
// Chart - Generic Mockup only..
renderChartAllEvents : function (id) {
var oVizFrame = this.getView().byId(id); // is an importing parameter
var oModel = new sap.ui.model.json.JSONModel();
var data = {
'Events' : [
{"Year": "2010","Value": "1"},
{"Year": "2011","Value": "531160"},
{"Year": "2012","Value": "915105"},
{"Year": "2013","Value": "109378"},
{"Year": "2014","Value": "127401"},
]};
oModel.setData(data);
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{
name : 'Year',
value : "{Year}"}],
measures : [{
name : 'Events',
value : '{Value}'} ],
data : {
path : "/Events"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
oVizFrame.setVizType('column');
oVizFrame.setVizProperties({
plotArea: {
colorPalette : d3.scale.category20().range()
}});
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Events"]
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Year"]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
},
});