SAPUI5 Advanced

Wiederholung der Grundlagen

Brandeis Consulting & Cadao

Business Application Studio

Brandeis Consulting & Cadao

Aufbau einer Web-Anwendung mit Services

Brandeis Consulting & Cadao

Projektstruktur

Die wichtigsten Folder

  • webapp - hier ist alles drin, was auf dem Webserver liegt
    • controller - Alle Controller
    • i18n - Text- bzw. Übersetzungsdateien
    • view - View Definitionen

Die wichtigsten Dateien

  • Component.js - Die Komponente
  • index.html - Startseite, falls die App standalone ausgeführt wird
  • manifest.json - Konfigurationen
Brandeis Consulting & Cadao

Controller Beispiel

  • Verwendete Module werden durch
    sap.ui.define(['a', 'b'], 
function(a, b){

})
    geladen
  • Die onInit Funktion wird automatisch aufgerufen, wenn der View initialisiert wird
  • Die weiteren Funktionen können aus den Views heraus aufgerufen werden.
    <SearchField
    id="search"
    width="50%"
    search="onFilter"
/>

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
],
    function (Controller, Filter, FilterOperator) {
        "use strict";

        return Controller.extend(
                "myns.sapui5recap.controller.UserList", {
            onInit: function () {

            },
            onFilter: function (oEvent) {
                const aFilter = [];
                const sQuery = oEvent.getParameter("query");
                if (sQuery) {
                    aFilter.push(new Filter("Firstname",
                        FilterOperator.Contains,
                        sQuery));
                }

                // filter binding
                const oList = this.byId("UserList");
                const oBinding = oList.getBinding("items");
                oBinding.filter(aFilter);
            }
        });
    });
Brandeis Consulting & Cadao

View Beispiel

  • Im View-Element werden die XMLNS-Namensräume definiert, z.B. xmlns:mvc="sap.ui.core.mvc" definiert den mvc.
  • Pro View kann es einen Default-Namensraum ohne Namen geben, der dann bei den View-Elementen nicht angegeben werden muss.
  • Die Attribute der Elemente findet man in der API-Dokumentation
  • Es kann auf Datenmodelle zugegriffen werden
  • Jedes Element braucht eine id
<mvc:View
    controllerName="myns.sapui5recap.controller.UserDetail"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    displayBlock="true"
>
    <Page
        id="page"
        title="{i18n>title}"
    >
        <content>

            <ObjectHeader id="_IDGenObjectHeader1" 
                          intro="{Firstname}-{Lastname}"
                          title="{UserId}" />
                                       <Text
                id="_IDGenText1"
                text="{Firstname}!"
            />
        </content>
    </Page>
</mvc:View>
Brandeis Consulting & Cadao

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SAPUI5 Recap</title>
    <script
        id="sap-ui-bootstrap"
        src="resources/sap-ui-core.js"
        data-sap-ui-theme="sap_horizon"
        data-sap-ui-resourceroots='{
            "myns.sapui5recap": "./"
        }'
        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-frameOptions="trusted"
    ></script>
</head>
<body class="sapUiBody sapUiSizeCompact" id="content">
    <div
        data-sap-ui-component
        data-name="myns.sapui5recap"
        data-id="container"
        data-settings='{"id" : "myns.sapui5recap"}'
        data-handle-validation="true"
    ></div>
</body>
</html>
Brandeis Consulting & Cadao

mainfest.json

Brandeis Consulting & Cadao

mainfest.json Details (1/3)

{
  "_version": "1.59.0",
  "sap.app": {
    "id": "myns.sapui5recap",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "0.0.1"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "resources": "resources.json",
    "sourceTemplate": {
      "id": "@sap/generator-fiori:basic",
      "version": "1.13.5",
      "toolsId": "11f1aa18-2b0c-412f-a688-d9a76a8112a8"
    },
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata4/sap/zbc_sb_tasks_v4/srvd/sap/zbc_sd_tasks/0001/",
        "type": "OData",
        "settings": {
          "annotations": [],
          "localUri": "localService/metadata.xml",
          "odataVersion": "4.0"
        }
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
Brandeis Consulting & Cadao

mainfest.json Details (2/3)

  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.120.0",
      "libs": {
        "sap.m": {},
 ...
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "myns.sapui5recap.i18n.i18n"
        }
      },
      "": {
        "dataSource": "mainService",
        "preload": true,
        "settings": {
          "operationMode": "Server",
          "autoExpandSelect": true,
          "earlyRequests": true
        }
      }
    },
    "resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ]
    },
Brandeis Consulting & Cadao

mainfest.json Details (3/3)

    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "async": true,
        "viewPath": "myns.sapui5recap.view",
        "controlAggregation": "pages",
        "controlId": "app",
        "clearControlAggregation": false
      },
      "routes": [ {
          "name": "RouteUserList",
          "pattern": ":?query:",
          "target": [ "TargetUserList" ]
        },
        {
          "name": "RouteUserDetail",
          "pattern": "User/{path}",
          "target": [ "TargetUserDetail" ]
        }
      ],
      "targets": {
        "TargetUserList": {
          "viewId": "UserList",
          "viewName": "UserList"
        },
        "TargetUserDetail":{
          "viewId": "UserDetailId",
          "viewName": "UserDetail"
        }
      }
    },
    "rootView": {
      "viewName": "myns.sapui5recap.view.App",
      "type": "XML",
      "async": true,
      "id": "App"
    }
  }
}
Brandeis Consulting & Cadao

Datenmodelle

  • Einheitliches Konzept für alle Daten
    • Übersetzungsdaten
    • JSON Datenmodelle
    • OData Datenmodelle
  • Einbindung über die manifest.json
  • Zugriff in Views über geschweifte Klammer, z.B. {Users\Firstname}
  • Ein Service kann mehrere Entitäten liefern
  • Es kann mehrere Datenmodelle in einer App geben, die jeweils einen Namen haben. Beim Zugriff wird der Name mit > angegeben, z.B. i18n>appHeaderText
  • Das Default-Datenmodell hat keinen Namen und wird beim Zugriff nicht angegeben

==> Demo manifest.json & View

Brandeis Consulting & Cadao

Browser Tools

  • Debugger
  • Console
  • HTML Struktur
Brandeis Consulting & Cadao