SAPUI5 Advanced

FPM Übung: Controller Erweitern

Redefinition der Methode beforeSave()

Brandeis Consulting & Cadao

Anforderung

Nach dem Klick auf Speichern und vor dem tatsächlichen Speichern soll noch eine Abfrage kommen.

Brandeis Consulting & Cadao

Schritt 1: Anlegen eines neuen Controllers

  • Datei OPExtend.controller.js im Verzeichnis webapp/ext anlegen.
  • Code reinkopieren:
sap.ui.define(
    [
        "sap/ui/core/mvc/ControllerExtension"
    ],
    function (ControllerExtension) {
        "use strict";

        return ControllerExtension.extend("myns.fpm4fe1.ext.OPExtend", {
            override: {
                editFlow: {
                    onBeforeSave: function (mParameters) {
                        var fnResolve, fnReject;
                        var oPromise = new Promise(function (resolve, reject) {
                            fnResolve = resolve;
                            fnReject = reject;
                        });
                        this.oDialog = new sap.m.Dialog({
                            title: "BeforeSaveExtension",
                            content: new sap.m.Text({
                                text: "This is an exmpale to check the
                                 beforeSaveExtension"
                            }),

                            beginButton: new sap.m.Button({
                                text: "Continue to Save",
                                press: function () {
                                    fnResolve();
                                    this.oDialog.close();
                                }.bind(this)
                            }),
                            endButton: new sap.m.Button({
                                text: "Cancel Save",
                                press: function () {
                                    fnReject();
                                    this.oDialog.close();
                                }.bind(this)
                            })
                        });
                        this.getView().addDependent(this.oDialog);
                        this.oDialog.open();
                        return oPromise;
                    },
                    onAfterSave: function (mParameters) {

                    }
                }
            },
        });
    }
);
Brandeis Consulting & Cadao

Anmerkung zum Controller

  • Der Code zeigt sowohl das Ablehnen als auch das Bestätigen mit dem Promise, das zurückgegeben wird.
  • Normalerweise würde man den Dialog in einem Fragment implementieren und nicht per JavaScript zusammenfrickeln. Das habe ich nicht gemacht, damit wir nicht noch mehr Dateien anlegen müssen.
Brandeis Consulting & Cadao

2. Schritt: Einbinden des neuen Controllers in der manifest.json

Position zum Einfügen

{ "sap.ui5": {

Einzufügen

"extends": {
  "extensions": {
    "sap.ui.controllerExtensions": {
      "sap.fe.templates.ObjectPage.ObjectPageController#myns.fpm4fe1::UsersObjectPage": {
        "controllerName": "myns.fpm4fe1.ext.OPExtend"
      }
    }
  }
},

Ergebnis

...
"sap.ui5": {
  "flexEnabled": true,
  "dependencies": {
    "minUI5Version": "1.120.0",
    "libs": {
      "sap.m": {},
      "sap.ui.core": {},
      "sap.ushell": {},
      "sap.fe.templates": {}
    }
  },
  "extends": {
    "extensions": {
      "sap.ui.controllerExtensions": {
        "sap.fe.templates.ObjectPage.ObjectPageController#myns.fpm4fe1::UsersObjectPage": {
          "controllerName": "myns.fpm4fe1.ext.OPExtend"
        }
      }
    }
  },
  "contentDensities": {
...
Brandeis Consulting & Cadao

Herausforderung für Fortgeschrittene

Wer schneller fertig ist, der kann sich mit der folgenden Aufgabenstellung beschäftigen:

Das Popup soll nur dann kommen, wenn der Vor- oder Nachname Leerzeichen enthält und nachfragen, ob das so korrekt ist. Ansonsten soll direkt gespeichert werden.

  • Wie kann auf die Daten des Users zugegriffen werden. Schau mal im Debugger nach.
  • Wie kann man das PopUp unterdrücken und trotzdem mit der Save-Sequenz weitermachen?
Brandeis Consulting & Cadao

Eine Lösung der Herausforderung

onBeforeSave: function (mParameters) {
    const sNames = mParameters.context.getProperty("Firstname") + mParameters.context.getProperty("Lastname");

    var fnResolve, fnReject;
    var oPromise = new Promise(function (resolve, reject) {
        fnResolve = resolve;
        fnReject = reject;
    });
    if (sNames.indexOf(' ') >= 0) {
        this.oDialog = new sap.m.Dialog({
            title: "BeforeSaveExtension",
            content: new sap.m.Text({
                text: "The name \"" + sNames + "\" contains Spaces!"
            }),
            beginButton: new sap.m.Button({
                text: "Continue to Save",
                press: function () {
                    fnResolve();
                    this.oDialog.close();
                }.bind(this)
            }),
            endButton: new sap.m.Button({
                text: "Cancel Save",
                press: function () {
                    fnReject();
                    this.oDialog.close();
                }.bind(this)
            })
        });
        this.getView().addDependent(this.oDialog);
        this.oDialog.open();
    } else {
        fnResolve();
    }
    return oPromise;
}
Brandeis Consulting & Cadao