SAPUI5 Grundlagen

Filtern, Sortieren und Gruppieren

Komfortfunktionen für Listen und Tabellen

(C) Brandeis Consulting.

Anforderung

  • Wir wollen dem Benutzer die Möglichkeit geben, die Datenmenge durch Filter einzugrenzen.
  • Zur besseren Darstellung sollen die Daten gruppiert werden
  • Die Daten sollen sortiert werden
(C) Brandeis Consulting.

Filtern

Das Filtern benötigigt zum einen ein Suchfeld im View und zum anderen die entsprechende Funktion im Controller.

Im View wird unserer Liste noch eine headerToolbar hinzugefügt. Diese enthält ein searchField. Die Liste bekommt ausserdem noch eine id, damit sich der Controller darauf beziehen kann:

<List
    id="invoiceList"
    class="sapUiResponsiveMargin"
    width="auto"
    items="{invoice>/Invoices}" >
    <headerToolbar>
        <Toolbar>
        <Title text="{i18n>invoiceListTitle}"/>
        <ToolbarSpacer/>
        <SearchField 
            width="50%" 
            search=".onFilterInvoices"/>
        </Toolbar>
    </headerToolbar>
      ...
webapp/view/InvoiceList.view.xml
sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/Filter",
  "sap/ui/model/FilterOperator"
], (Controller,  Filter, FilterOperator) => {
  "use strict";

  return Controller.extend("ui5.walkthrough.controller.InvoiceList", {
    onFilterInvoices(oEvent) {
      // build filter array
      const aFilter = [];
      const sQuery = oEvent.getParameter("query");
      if (sQuery) {
        aFilter.push(new Filter("ProductName", 
                                        FilterOperator.Contains, 
                                        sQuery));
      }

      const oList = this.byId("invoiceList");
      const oBinding = oList.getBinding("items");
      oBinding.filter(aFilter);
    }
  });
});
Neu: webapp/controller/InvoiceList.controller.js
(C) Brandeis Consulting.

Sortierung

Damit die Daten sortiert werden, muss man dem List-Oberflächenelement einen Sorter mitgeben.

   <List
      id="invoiceList"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{
         path : 'invoice>/Invoices',
         sorter : {
            path : 'ProductName' 
         }
      }" >
      ...
   </List>
webapp/view/InvoiceList.view.xml
(C) Brandeis Consulting.

Gruppierung

Die Gruppierung erfolgt ebenfalls mit einem Sorter. Alledings wird hier jetzt das Attribut group auf true gesetzt. In dem Beispiel sehen wir auch, dass mehrere Sorter möglich sind. Damit können wir nach unterschiedlichen Kriterien Gruppieren und Sortieren.

   <List
      id="invoiceList"
      headerText="{i18n>invoiceListTitle}"
      class="sapUiResponsiveMargin"
      width="auto"
        items="{
            path : 'invoice>/Invoices',
            sorter : [{
                path : 'ShipperName',
                group : true
            }, 
            {
                path: 'ExtendedPrice'
            }]

        }" >
(C) Brandeis Consulting.