<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Load JSON file declared in Manifest</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{
"Testing": "./",
"sap.ui.demo.mock": "mockdata"
}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "Testing"
})
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";
var Component = sap.ui.core.UIComponent.extend("Testing.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
/***Create the model and load data from the local JSON file ***/
// var oModel = new JSONModel("./model/Object.json");
// oModel.setDefaultBindingMode("OneWay");
}
});
return Component;
});
{
"Objects": [{
"Name": "Alice Mutton",
"Supplier": "Exotic Liquids",
"Price": "75.00 EUR",
"Units": "20 PC"
}, {
"Name": "Aniseed Syrup",
"Supplier": "Grandma Kelly's Homestead",
"Price": "3.00 EUR",
"Units": "6 PC "
}, {
"Name": "Chang",
"Supplier": "New Orleans Cajun Delights",
"Price": "56.00 EUR",
"Units": "40 PC"
}
]
}
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("Testing.controller.App", {
onInit: function() {
/*this below code for get the JSON Model form Manifest.json file*/
var dataModel = this.getOwnerComponent().getModel("tableData");
this.getView().setModel(dataModel, "DataModel");
}
});
});
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "navigationjson",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.32.0"
},
"dataSources": {
"jsonFile": {
"uri": "./Objects.json",
"type": "JSON"
}
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": ["sap_hcb", "sap_bluecrystal"]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": {
"viewName": "Testing.view.App",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {}
}
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "Testing.view",
"controlId": "app",
"controlAggregation": "pages"
},
"routes": [{
"pattern": "",
"name": "App",
"view": "App",
"controlAggregation": "pages"
}
],
"targets": {
"App": {
"viewName": "App"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"tableData": {
"type": "sap.ui.model.json.JSONModel",
"dataSource": "jsonFile"
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
}
}
<mvc:View controllerName="Testing.controller.App"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<App id="app">
<pages>
<Page title="Tableview">
<content>
<Table class="sapUiSizeCompact" id="table1"
items="{path: 'DataModel>/Objects'}" >
<columns>
<Column>
<Label text="Product Name"/>
</Column>
<Column>
<Label text="Supplier"/>
</Column>
<Column>
<Label text="Price"/>
</Column>
<Column>
<Label text="Units Ordered"/>
</Column>
</columns>
<ColumnListItem>
<Text text="{DataModel>Name}"></Text>
<Text text="{DataModel>Supplier}"></Text>
<Text text="{DataModel>Price}"></Text>
<Text text="{DataModel>Units}"></Text>
</ColumnListItem>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>