<!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>
<!-- Make sure to bootstrap from a specific UI5 version. DO NOT rely on the latest CDN release. The below `src` is for testing and demos only. -->
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
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/Device",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent, Device) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
manifest: "json",
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
},
init () {
UIComponent.prototype.init.apply(this, arguments);
this.setDensity().getRouter().initialize();
},
setDensity ({
styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
targetElement = document.body,
} = {}) {
targetElement.classList.add(styleClass);
return this;
},
});
});
{
"_version": "1.35.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "App Title",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"handleValidation": true,
"dependencies": {
"minUI5Version": "1.92.1",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"resources": {
"js": [
],
"css": [
]
},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"height": "100%"
},
"routing": {
"routes": {
"home": {
"pattern": "",
"target": "home"
}
},
"targets": {
"home": {
"id": "homeView",
"name": "Home",
"viewLevel": 1
},
"notFound": {
"id": "notFoundView",
"name": "Home",
"transition": "slide",
"viewLevel": 98
}
},
"config": {
"async": true,
"type": "View",
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"path": "demo.view",
"controlId": "rootApp",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
},
"homeRoute": "home"
}
}
}
}
<mvc:View controllerName="demo.controller.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
displayBlock="true"
>
<App id="rootApp" autoFocus="false">
<pages>
<!-- will be added by the Router -->
</pages>
</App>
</mvc:View>
<mvc:View controllerName="demo.controller.Home"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
>
<Page id="homePage"
title="Home"
class="sapUiResponsiveContentPadding"
>
<Table id="table" growing="true" updateStarted="onTableUpdateStarted">
<columns>
<Column><Text text="Number" /></Column>
</columns>
</Table>
</Page>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
], function(Controller) {
"use strict";
return Controller.extend("demo.controller.App", {
onInit () {
// ...
},
});
});
sap.ui.define(
[
'sap/ui/core/mvc/Controller',
'demo/controller/GrowingJSONModel',
'sap/m/Text',
'sap/m/ColumnListItem',
],
function (Controller, GrowingJSONModel, Text, ColumnListItem) {
'use strict';
return Controller.extend('demo.controller.Home', {
onInit() {
this._aRemoteDataSource = [];
for (let i = 0; i !== 1000; i++) {
this._aRemoteDataSource.push({ number: i });
}
this._tableModel = new GrowingJSONModel([]);
this._tableModel._totalCount = this._aRemoteDataSource.length;
this.getView().setModel(this._tableModel, 'table');
this._table = this.getView().byId('table');
this._table.bindItems({
path: 'table>/',
key: 'number', //this doesn't seem to have any effect
factory: this._factory,
templateShareable: false,
});
this.loadData(0);
},
_factory(sId, oContext) {
let oObject = oContext.getObject();
console.log('Building list item for entry ', oObject.number);
return new ColumnListItem({
type: 'Inactive',
cells: [new Text({ text: oObject.number.toString() })],
});
},
onTableUpdateStarted(oEvent) {
if (oEvent.getParameter('reason') === 'Growing') {
this.loadData(oEvent.getParameter('actual') + 1);
}
},
loadData(iSkip) {
this._tableModel.setData([
...this._tableModel.getData(),
...this._aRemoteDataSource.slice(iSkip, iSkip + 10),
]);
},
});
}
);
sap.ui.define(['sap/ui/model/json/JSONListBinding'], function (
JSONListBinding
) {
'use strict';
/**
* PagingJSONListBinding
* @class
* @extends sap.ui.model.json.JSONListBinding
*/
return JSONListBinding.extend('demo.GrowingJSONListBinding', {
getLength: function () {
return this.getModel()._totalCount;
},
});
});
sap.ui.define(
['demo/controller/GrowingJSONListBinding', 'sap/ui/model/json/JSONModel'],
function (GrowingListBinding, JSONModel) {
'use strict';
/**
* PagingJSONModel
* @class
* @extends sap.ui.model.json.JSONModel
*/
return JSONModel.extend('demo.GrowingJSONModel', {
bindList: function (sPath, oContext, aSorters, aFilters, mParameters) {
return new GrowingListBinding(
this,
sPath,
oContext,
aSorters,
aFilters,
mParameters
);
},
});
}
);