SAPUI5 Grundlagen

Aggregation Binding

Listen und Tabellen

(C) Brandeis Consulting.

Datenmodell für Listen & Tabellen

Bisher hatten wir flache Datenmodelle, die einer Struktur im ABAP entsprechen würden.

Für Listen und Tabellen brauchen wir mehrere Elemente. Diese sind im Datenmodell in Arrays.

Entsprechende Datenmodelle könnten aus OData kommen. Für das erste Beispiel verwenden wir aber ein JSON Dokument.

Schritte für die Darstellung einer Liste

  1. Datenquelle anlegen (OData oder JSON)
  2. Datenmodell in der manifest.json bekannt machen
  3. Entsprechendes List Oberflächenelement verwenden und das Datenmodell der items-Property mitteilen
  4. Innerhalb der Liste die ObjectListItems platzieren
(C) Brandeis Consulting.

Die JSON Daten

{
    "Invoices": [
        {
            "ProductName": "Pineapple",
            "Quantity": 21,
            "ExtendedPrice": 87.2,
            "ShipperName": "Fun Inc.",
            "ShippedDate": "2015-04-01T00:00:00",
            "Status": "A"
        },
        {
            "ProductName": "Milk",
            "Quantity": 4,
            "ExtendedPrice": 10,
            "ShipperName": "ACME",
            "ShippedDate": "2015-02-18T00:00:00",
            "Status": "B"
        },
        {
            "ProductName": "Canned Beans",
            "Quantity": 3,
            "ExtendedPrice": 6.85,
            "ShipperName": "ACME",
            "ShippedDate": "2015-03-02T00:00:00",
            "Status": "B"
        },
        
...
    ]
}
webapp/Invoices.json
(C) Brandeis Consulting.

Weiteres Datenmodell in der manifest.json bekannt machen

{
  ...
  "sap.ui5": {
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "ui5.walkthrough.i18n.i18n",
          "supportedLocales": [
            ""
          ],
          "fallbackLocale": ""
        }
      },
      "invoice": {
        "type": "sap.ui.model.json.JSONModel",
        "uri": "Invoices.json"
      }
    }
  }
  ...
}
webapp/manifest.json
(C) Brandeis Consulting.

Neuen View mit Liste anlegen und einbetten

Neuer View InvoiceList

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      headerText="{i18n>invoiceListTitle}"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{invoice>/Invoices}" >
      <items>
         <ObjectListItem
            title="{invoice>Quantity} x {invoice>ProductName}"/>
      </items>
   </List>
</mvc:View>
webapp/view/InvoiceList.view.xml

Einbinden des neuen Views

<mvc:View
  controllerName="ui5.walkthrough.controller.App"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true">
  <Shell>
    <App class="myAppDemoWT">
      <pages>
        <Page title="{i18n>homePageTitle}">
          <content>
            <Panel
              headerText="{i18n>helloPanelTitle}"
              class="sapUiResponsiveMargin"
              width="auto">
              <content>
                <mvc:XMLView
                  viewName="ui5.walkthrough.view.HelloPanel"/>
                <mvc:XMLView
                  viewName="ui5.walkthrough.view.InvoiceList"/>
              </content>
            </Panel>
          </content>
        </Page>
      </pages>
    </App>
  </Shell>
</mvc:View>
webapp/view/App.view.xml
(C) Brandeis Consulting.