<!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);
      }
    },

  });
});