<!DOCTYPE html>
<html>
<head>
<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-compatVersion="edge"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"sap.ui.table" : "./"
}'>
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
// Code goes here
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
name: "sap.ui.table",
height: "100%"
})
}).placeAt("content");
/* Styles go here */
.myButton {
background-color: green;
width: 150px;
}
.myText {
font-weight: bold;
}
sap.ui.define(["sap/ui/core/UIComponent"], function(UIComponent) {
"use strict";
return UIComponent.extend("sap.ui.table.Component", {
metadata: {
version: "1.0",
rootView: "sap.ui.table.App",
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.table",
"controlId": "app",
"controlAggregation": "pages",
"transition": "slide"
},
"routes": [{
"pattern": "",
"name": "appHome",
"target": "home"
}, {
"pattern": "odata",
"name": "odataTable",
"target": "odata"
}],
"targets": {
"home": {
"viewName": "Home",
"viewLevel": 1
},
"odata": {
"viewName": "OData",
"viewLevel" : 2
}
}
}
},
init: function() {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
var oresModel = new sap.ui.model.resource.ResourceModel({
bundleName: "sap.ui.table.i18n"
});
this.setModel(oresModel, "i18n");
//To solve CORS issue add this before Uri- https://cors-anywhere.herokuapp.com/
var northwindUri = "http://services.odata.org/V2/Northwind/Northwind.svc/Products?$format=json";
var ojsonModel = new sap.ui.model.json.JSONModel(northwindUri);
console.log("JSON Model", ojsonModel);
this.setModel(ojsonModel, "jsonModel");
$.getJSON(northwindUri).done(function(data) {
console.log("jQuery Data JSON", data);
});
var gatewayUri = "https://sapes4.sapdevcenter.com/sap/opu/odata/IWBEP/GWDEMO";
var odataModel = new sap.ui.model.odata.ODataModel(gatewayUri, false, "P1940678860", "rahul123", null);
odataModel.read("/ProductCollection", null, null, true, function(oData, response) {
console.log("Read success", oData);
}, function(e) {
console.log("Read Error", JSON.stringify(e));
});
this.setModel(odataModel, "odataModel");
},
onBack: function(oEvent) {
var sPreviousHash;
var oHistory = sap.ui.core.routing.History.getInstance();
sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
this.getRouter().navTo("appHome", {}, true /*no history*/ );
}
}
});
});
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<App id="app">
</App>
</mvc:View>
<mvc:View
controllerName="sap.ui.table.Home"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page>
<headerContent>
<Bar design="Header">
<contentMiddle>
<Text class="myText" text="JSON Table" />
</contentMiddle>
<contentRight>
<Button icon="sap-icon://arrow-right" press="onNext" />
</contentRight>
</Bar>
</headerContent>
<Table id="jsonTable" headerText="Products"
inset="true"
width="auto"
items="{jsonModel>/d/results}">
<columns>
<Column>
<Text text="Product D"></Text>
</Column>
<Column>
<Text text="Product Name"></Text>
</Column>
<Column>
<Text text="Category ID" />
</Column>
<Column>
<Text text="Quantity Per Unit" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{jsonModel>ProductID}" />
<Text text="{jsonModel>ProductName}" />
<Text text="{jsonModel>CategoryID}" />
<Text text="{jsonModel>QuantityPerUnit}" />
</cells>
</ColumnListItem>
</items>
</Table>
</Page>
</mvc:View>
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
"use strict";
return Controller.extend("sap.ui.table.Home", {
onNext: function(oEvent) {
this.getOwnerComponent().getRouter().navTo("odataTable");
}
});
});
<mvc:View
controllerName="sap.ui.table.OData"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc">
<Page title="OData Table" showNavButton="true"
navButtonPress="onNavBack"
class="sapUiResponsiveContentPadding">
<List headerText="Product Details from Gateway Demo System"
items="{odataModel>/ProductCollection}">
<items>
<ObjectListItem type="Active"
press="onSelect"
intro="{odataModel>ProductID}"
title="{odataModel>ProductName}"
number="{odataModel>UnitPrice}"
numberUnit="{odataModel>CurrencyText}">
<attributes>
<ObjectAttribute title="Product Description"
text="{odataModel>ProductDescription}">
</ObjectAttribute>
</attributes>
</ObjectListItem>
</items>
</List>
<Panel id="prodDetailsPanel"
headerText="Details"
class="sapUiResponsiveMargin"
width="auto">
<Label text="Product ID" />
<Input id="prodId" value="{odataModel>ProductID}" />
<Label text="Product Name" />
<Input id="prodName" value="{odataModel>ProductName}" />
<Label text="Product Description" />
<Input id="prodDesc" value="{odataModel>ProductDescription}" />
</Panel>
</Page>
</mvc:View>
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
"use strict";
return Controller.extend("sap.ui.table.OData", {
onNavBack: function(oEvent) {
this.getView().byId("prodId").setValue();
this.getView().byId("prodName").setValue();
this.getView().byId("prodDesc").setValue();
this.getOwnerComponent().onBack(oEvent);
},
onSelect: function(oEvent) {
var sPath = oEvent.getSource().getBindingContext("odataModel").getPath();
console.log("Path is : ", oEvent.getSource().getBindingContext("odataModel").getPath());
var oProductDetailPanel = this.getView().byId("prodDetailsPanel");
oProductDetailPanel.bindElement({
path: sPath,
model: "odataModel"
});
}
});
});
# App Descriptor
iWantToNavigate=I want to navigate
homePageTitle=JSON Data Table - Products
NotFound=Not Found
NotFound.text=Sorry, but the requested resource is not available.
NotFound.description=Please check the URL and try again.