Inhalt

• Erzeugen einer UI5 App mit Template auf Basis eines OData Service eines SAP Systems
• Wiederholung der wichtigsten Features aus der UI5 Grundlagen Schulung

Voraussetzungen

Ihr müsst nichts machen, das sollte schon alles gegeben sein!

• Tools:
  • BAS
  • Eclipse mit ADT
• Ein Service auf dem ABAP Server
• Eine Verbindung von ABAP Server mit der BTP

Application Generator starten

Alternativ: Button Create Project

Template Basic auswählen

==> Next

Parameter einstellen (2/2)

Ausführen der Anwendung

Über die Buttons

Oder über das Terminal

• Falls das Terminal noch nicht angezeigt wird: Menü->Terminal->New Terminal
• Eingabe von npm run start
  

Ein Oberflächenelement einbauen

• <content> ist der Default-Bereich der Page. Der Tag kann deshalb weggelassen werden.
• Das Attribut id muss mit einem eindeutigen Wert gefüllt werden, damit die Anwendung personalisierbar ist. Das wird geprüft, wenn in der manifest.json das Attribut sap.ui5/flexEnabled: true gesetzt ist.

<mvc:View controllerName="myns.sapui5recap.controller.UserList"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <content >
          <Text id="_IDGenText1" text="Hallo Welt"/>
        </content>
    </Page>
</mvc:View>

Ein Blick in die API-Doku

API von ObjectListItem anschauen:

1. Properties, z.B. Icon ==> Icon Explorer
2. Aggregations, z.B. attributes

    ...
      <ObjectListItem
          id="_IDGenObjectListItem1"
          title="{Firstname} {Lastname}"
          icon="sap-icon://cancel"
      >
          <attributes>
              <ObjectAttribute
                  id="_IDGenObjectAttribute1"
                  title="{i18n>dateOfBirth}"
                  text="{DateOfBirth}"
              />
          </attributes>
      </ObjectListItem>
    ...

Optional: Filter mit LiveSearch

Herausforderungen:

• Wie heisst das Ereignis? API SearchField - Events
• Wie heisst der Parameter? ==>Debugging oder API!
• Wie filtere ich nach mehreren Feldern? API Filter

<SearchField id="search"
        width="50%"
        search="onFilter"
        liveChange="onLiveChange" />

            onLiveChange: function (oEvent) {
                
                const aFilter = [];
                const sQuery = oEvent.getParameter("newValue");
                if (sQuery) {
                    aFilter.push(  new Filter({
                                        filters: [
                                        new Filter("Firstname", FilterOperator.Contains, sQuery),
                                        new Filter("Lastname", FilterOperator.Contains, sQuery)
                                        ],
                                        and: false
                                    }) );
                }

                // filter binding
                const oList = this.byId("_IDGenList1");
                const oBinding = oList.getBinding("items");
                oBinding.filter(aFilter);
            }

Navigation und Detailseite (2/5)

Schritt 1

"routes": [
       ...,
        {          "pattern": "detail/{UserId}",          "name": "detail",          "target": "TargetDetails"        }
      ],
      "targets": {
      ..,
        "TargetDetails": {          "id": "detail",          "name": "Detail",          "viewName": "UserDetails"        }
      }

Navigation und Detailseite (4/5)

Schritt 4

<mvc:View
    controllerName="myns.sapui5recap.controller.UserDetails"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page id="_IDUserDetail"
        title="{i18n>detailUserTitle}">
        <ObjectHeader id="_IDGenObjectHeader1"
            title="{Firstname} {Lastname}" />
        <ObjectListItem id="_IDGenObjectListItem1">
            <ObjectAttribute id="_IDGenObjectAttribute1"
                title="{i18n>dateOfBirth}"
                text="{DateOfBirth}" />
        </ObjectListItem>
        <ObjectListItem id="_IDGenObjectListItem2">
            <ObjectAttribute id="_IDGenObjectAttribute2"
                title="gender"
                text="{Gender}" />
        </ObjectListItem>
    </Page>
</mvc:View>