<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Demo</title>
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon_dark"
data-sap-ui-async="true"
data-sap-ui-modules="sap/ui/thirdparty/sinon,sap/ui/thirdparty/datajs,demo/localService/mockserver"
data-sap-ui-oninit="module:demo/init"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-xx-waitfortheme="init"
></script>
</head>
<body id="content" class="sapUiBody">
<div style="height: 100%;"
data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{ "id": "rootComponent" }'
></div>
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
manifest: "json",
},
});
});
{
"_version": "1.35.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "Demo",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"MyNodes": {
"uri": "/",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"localUri": "localService/metadata.xml"
}
}
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"handleValidation": true,
"dependencies": {
"minUI5Version": "1.86.3",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"models": {
"": {
"dataSource": "MyNodes",
"preload": true,
"settings": {
"countMode": "InlineRepeat"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"rootView": {
"viewName": "demo.view.Root",
"id": "rootView",
"type": "XML",
"async": true,
"height": "100%",
"displayBlock": true
}
}
}
<mvc:View controllerName="demo.controller.Root"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
displayBlock="true"
>
<App autoFocus="false">
<Page showHeader="false" class="sapUiResponsiveContentPadding">
<!-- Sample sap.m.ListBase control -->
<Table id="table" headerText="OData V2 OrderSet (mock server)">
<columns>
<Column>
<Text text="OrderID" />
</Column>
<Column>
<Text text="OrderName" />
</Column>
</columns>
<dependents>
<ColumnListItem id="itemToCopy">
<Text text="{OrderID}" />
<Text text="{OrderName}" />
</ColumnListItem>
</dependents>
</Table>
</Page>
</App>
</mvc:View>
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<edmx:Edmx Version="1.0"
xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"
xmlns="http://schemas.microsoft.com/ado/2008/09/edm"
xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
xmlns:sap="http://www.sap.com/Protocols/SAPData">
<edmx:DataServices m:DataServiceVersion="2.0">
<Schema Namespace="Demo" xml:lang="en" sap:schema-version="1">
<EntityType Name="Order">
<Key>
<PropertyRef Name="OrderID" />
</Key>
<Property Name="OrderID" Type="Edm.Int32" Nullable="false" />
<Property Name="OrderName" Type="Edm.String" Nullable="true" />
</EntityType>
<EntityContainer Name="DemoEntities" m:IsDefaultEntityContainer="true">
<EntitySet Name="OrderSet" EntityType="Demo.Order" />
</EntityContainer>
</Schema>
</edmx:DataServices>
</edmx:Edmx>
sap.ui.define([
"sap/ui/core/util/MockServer",
], function(MockServer) {
"use strict";
return {
init: function() {
MockServer.config({
autoRespond: true,
autoRespondAfter: 0,
});
const mockServer = new MockServer({
rootUri: "/",
recordRequests: false,
});
const pathPrefix = sap.ui.require.toUrl("demo/localService");
mockServer.simulate(`${pathPrefix}/metadata.xml`, {
sMockdataBaseUrl: `${pathPrefix}/mockdata`
});
mockServer.start();
},
};
});
[
{
"OrderID": 1,
"OrderName": "Name1"
},
{
"OrderID": 2,
"OrderName": "Name2"
},
{
"OrderID": 3,
"OrderName": "Name3"
},
{
"OrderID": 4,
"OrderName": "Name4"
},
{
"OrderID": 5,
"OrderName": "Name5"
},
{
"OrderID": 6,
"OrderName": "Name6"
},
{
"OrderID": 7,
"OrderName": "Name7"
},
{
"OrderID": 8,
"OrderName": "Name8"
},
{
"OrderID": 9,
"OrderName": "Name9"
},
{
"OrderID": 10,
"OrderName": "Name10"
}
]
sap.ui.require([
"demo/localService/mockserver",
], function(mockserver) {
"use strict";
mockserver.init();
sap.ui.require([ "sap/ui/core/ComponentSupport" ]);
});
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator",
"sap/ui/core/CustomData", // dependency for the .data API
], function(Controller, Filter, FilterOperator) {
"use strict";
/**
* This is a small sample. Adjust according to your project
*/
return Controller.extend("demo.controller.Root", {
onInit: function() {
this.startList(this.byId("table"), 0, 3, {
path: "/OrderSet",
templateShareable: true,
template: this.byId("itemToCopy"),
filters: [
new Filter({
path: "OrderID",
operator: FilterOperator.BT, // between
value1: 2,
value2: 9,
})
],
parameters: {/* Model dependent */},
// See ManagedObject.AggregationBindingInfo for more options
});
},
startList: function(listBase, $skip, $top, restInfo) {
let startIndex = $skip;
let length = $top;
let totalSize;
(function repeat(that) {
const bindingInfo = Object.assign({ startIndex, length }, restInfo);
listBase.bindItems(bindingInfo);
listBase.data("repeater", event => {
totalSize = event.getParameter("total"); // $count value e.g. 20
startIndex += $top;
startIndex = startIndex < totalSize ? startIndex : 0;
that._timeoutID = setTimeout(() => repeat(that), 2000);
}).attachEventOnce("updateFinished", listBase.data("repeater"), that);
})(this);
},
stopList: function(listBase) {
if (!listBase) {
sap.ui.require(["sap/base/Log"], Log => Log.error("Which list??"));
return;
}
clearInterval(this._timeoutID);
listBase.detachEvent("updateFinished", listBase.data("repeater"), this);
},
onExit: function() {
this.stopList(this.byId("table"));
this.byId("itemToCopy").destroy();
},
});
});