<!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://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-modules="sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"demo": "./"}'
data-sap-ui-xx-componentPreload="off"
data-sap-ui-xx-waitfortheme="init"
></script>
</head>
<body id="content" class="sapUiBody">
<div data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{"id": "rootComponent"}'
></div>
</body>
</html>
{
"_version": "1.12.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "foo",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"odataDemo": {
"uri": "https://cors-anywhere.herokuapp.com/https://services.odata.org/V2/Northwind/Northwind.svc/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.40.0",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"": {
"dataSource": "odataDemo",
"settings": {
"tokenHandling": false,
"preliminaryContext": true,
"canonicalRequests": true
},
"preload": true
},
"count": {
"type": "sap.ui.model.json.JSONModel"
}
},
"rootView": {
"id": "rootView",
"viewName": "demo.view.App",
"type": "XML",
"async": true
},
"routing": {
"routes": [{
"pattern": "",
"name": "home",
"target": "home"
}],
"targets": {
"home": {
"viewName": "Home",
"viewLevel": 1
},
"notFound": {
"viewName": "Home",
"transition": "show"
}
},
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "demo.view",
"transition": "slide",
"controlId": "myApp",
"controlAggregation": "pages",
"bypassed": {
"target": "notFound"
}
}
}
}
}
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
displayBlock="true"
>
<App id="myApp">
<pages>
<!-- views will be placed in here by router targets -->
</pages>
</App>
</mvc:View>
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m"
busy="true"
busyIndicatorDelay="0"
controllerName="demo.controller.Home"
>
<Page backgroundDesign="List" title="{
parts: [
'count>/filtered',
'count>/total'
],
formatter: '.createPageTitle'
}">
<headerContent>
<SearchField
width="100%"
showSearchButton="false"
placeholder="Search (e.g. Tofu)"
search=".onSearch"
/>
</headerContent>
<List id="list"
busyIndicatorDelay="500"
growing="true"
growingScrollToLoad="true"
updateFinished=".updateCounts(${$parameters>reason},${$parameters>total})"
items="{
path: '/Products',
parameters: {
select: 'ProductID,ProductName'
}
}"
>
<StandardListItem title="{ProductName}" />
</List>
</Page>
</mvc:View>
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: {
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
manifest: "json",
},
init: function () {
UIComponent.prototype.init.apply(this, arguments);
this.setDensity().getRouter().initialize();
},
setDensity: function ({
styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
targetElement = document.body,
} = {}) {
targetElement.classList.add(styleClass);
return this;
},
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/ChangeReason",
"sap/ui/model/Filter",
], function(Controller, ChangeReason, Filter) {
"use strict";
return Controller.extend("demo.controller.Home", {
onInit: function() {
this.getOwnerComponent().getModel().metadataLoaded().then(() => {
this.getView().setBusy(false);
});
},
createPageTitle: (countFiltered, countTotal = 0) => `Products (${
countFiltered < countTotal ? countFiltered + "/" + countTotal : countTotal
})`,
onSearch: function(event) {
const filter = this.getSearchFilters(event.getParameter("query").trim());
this.byId("list").getBinding("items").filter(filter, "Application");
},
getSearchFilters: (query) => !query ? null : new Filter({
path: "ProductName",
operator: "Contains",
value1: query,
caseSensitive: false,
}),
updateCounts: function(reason, totalCount) {
const countModel = this.getView().getModel("count");
switch (reason) {
case "Filter": return countModel.setProperty("/filtered", totalCount);
case "Growing": return;
default: return countModel.setProperty("/total", totalCount);
}
},
});
});