<!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.hana.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>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<!-- by Denise Nepraunig @denisenepraunig -->
<!-- example for a SAPUI5 MVC XML view with JSON data from a file
and data binding based on the demokit example from sapui5:
https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/samples
-->
<script>
// Best practice would be to set this stuff up in an Component.js
// but let's not over-complicate stuff for demonstration purposes
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)
<mvc:View
height="100%"
controllerName="view.Main"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Page
title="Page"
class="marginBoxContent" >
<content>
<Table class="sapUiResponsiveMargin" id="idTable" headerText="someHeader" items="{/}" updateFinished="_onTableUpdateFinished" width="auto">
<columns id="KPITable_columns">
<Column id="KPITable_KPIColumn" >
<header id="KPITable_KPIColumn_header">
<Label id="KPITable_KPIColumn_label" text="header1"/>
</header>
</Column>
<Column id="KPITable_KPINameColumn">
<header id="KPITable_KPINameColumn_header">
<Label id="KPITable_KPINameColumn_label" text="header2"/>
</header>
</Column>
<Column hAlign="Center" id="KPITable_CsvColumn">
<header id="KPITable_CsvColumn_header">
<Label id="KPITable_CsvColumn_label" text="header3"/>
</header>
</Column>
<Column id="KPITable_LastImportedByColumn">
<header id="KPITable_LastImportedByColumn_header">
<Label id="KPITable_LastImportedByColumn_label" text="header4"/>
</header>
</Column>
</columns>
<ColumnListItem id="columnListItem" press="onLineItemPressed" type="Navigation" vAlign="Middle">
<cells id="columnListItem_cells">
<Text id="columnListItem_KPIColumn" text="{test}"></Text>
<ObjectIdentifier id="columnListItem_Description" title="Hello" />
<core:Icon color="#666666" id="columnListItem_ExampleIcon" press="_onSaveExampleIconPressed" src="sap-icon://attachment"
tooltip="SAVE_EXAMPLE" ></core:Icon>
<Link id="columnListItem_LastImportedByName" press="_onUserLinkPressed" text="{test}" wrapping="true"></Link>
</cells>
</ColumnListItem>
</Table>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button type="Emphasized" text="Emphasized" press="onPress" />
<Button text="Default" press="onPress" />
<Button icon="sap-icon://action" press="onPress" />
</Toolbar>
</footer>
</Page>
</mvc:View>
sap.ui.controller("view.Main", {
onInit: function() {
var model = new sap.ui.model.json.JSONModel();
model.setData([{test:"test1"},{test:"test2"}]);
this.getView().setModel(model);
},
onPress: function (evt) {
jQuery.sap.require("sap.m.MessageToast");
sap.m.MessageToast.show(evt.getSource().getId() + " Pressed");
},
_onTableUpdateFinished: function(oEvent){
this.getView().byId("idTable").setHeaderText("New Header Text");
}
});