SAPUI5: Benutzerbenachrichtigungsmanagement mit sap.m.MessageBox und MessageToast

Ein Leitfaden zum Erstellen asynchroner Bestätigungsdialoge in Fiori-Anwendungen, zum Erfassen von Benutzeraktionen mit sicheren Callback-Mechanismen, zur Integration der OData-Datenlöschung und zu den Standards für Toast-Benachrichtigungen.

In unternehmenskritischen Fiori-Szenarien, in denen Benutzerinteraktion und Datenintegrität entscheidend sind, ist die Bestätigung von Benutzeraktionen (z. B. "Sind Sie sicher, dass Sie die Bestellung löschen möchten?") oder die Meldung von Transaktionsergebnissen, ohne den Bildschirm zu blockieren, eine grundlegende Anforderung. SAPUI5 bietet zwei verschiedene Ebenen zur Verwaltung dieser Prozesse: sap.m.MessageBox, das den Bildschirm blockiert und auf eine definitive Aktion wartet, und sap.m.MessageToast, das leichtgewichtige Benachrichtigungen liefert, ohne den Arbeitsfluss zu unterbrechen. In diesem Leitfaden behandeln wir das asynchrone Kontextmanagement in Dialogprozessen und die UX-Standards für Unternehmen.

💡 Regeln für Benachrichtigungs- und Bestätigungszyklen

Richtige Komponentenauswahl: Bei transaktionalen Schritten, bei denen die Aktion unumkehrbar ist (Löschen, Buchen) oder in kritischen Fehlersituationen muss MessageBox verwendet werden. Bei Erfolgszuständen im Hintergrund, die die Aufmerksamkeit des Benutzers nicht ablenken müssen, sollte MessageToast bevorzugt werden.
Asynchrones Kontextmanagement: MessageBox-Methoden werden asynchron ausgeführt. Wenn in den logischen Abläufen, die durch den Klick des Benutzers auf eine Schaltfläche ausgelöst werden, auf den Controller-Kontext (`this`) zugegriffen werden muss, sollte eine der geeigneten Kontextmanagement-Methoden wie ES6 Arrow Functions, .bind(this) oder var that = this; bevorzugt werden.
🛑 Fiori UX-Löschstandards: In Szenarien zum Löschen von Datensätzen (Delete) empfehlen die SAP Fiori Guidelines, den Fokus auf die Abbrechen-Schaltfläche (CANCEL) zu legen (initialFocus) und den sicheren Pfad hervorzuheben (emphasizedAction), anstatt die destruktive Aktionsschaltfläche zu betonen, um versehentlichen Datenverlust durch den Benutzer zu verhindern.
Angepasste flexible Strukturen: Während für schnelle Situationen Shortcut-APIs wie .success(), .error() oder .warning() bevorzugt werden können, sollte in Fällen, die mehrere Schaltflächenkombinationen und erweiterte Konfigurationen erfordern, die flexibelste API, die Basis-Methode MessageBox.show(), verwendet werden.
Größenanpassung von MessageToast: Die Angabe von dimensionalen Parametern wie width in MessageToast-Komponenten ist optional. In Unternehmensprojekten wird empfohlen, die Breitenverwaltung der automatischen responsiven Berechnung des Frameworks zu überlassen, um die Bildschirmkompatibilität zu gewährleisten.

💻 Referenz für Benachrichtigungen und Bestätigungen auf der Controller-Ebene

0. JavaScript-Benachrichtigung und OData-Löschintegration (Notification.controller.js)

Einrichtung von Bestätigungsmechanismen, i18n-Lokalisierungskompatibilität, Erfassung asynchroner Benutzerentscheidungen und der Datenlöschzyklus über das OData-Modell.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageBox",
    "sap/m/MessageToast"
], function (Controller, MessageBox, MessageToast) {
    "use strict";

    return Controller.extend("ui5.app.controller.Notification", {

        onInit: function () {
            // Access resource bundle for clean i18n globalization compliance
            this._oResourceBundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();
            this.oODataModel = this.getOwnerComponent().getModel();
        },

        // 1. Standard Error Notification
        onShowAlert: function () {
            var sMessage = this._oResourceBundle.getText("operationFailedMessage");
            
            MessageBox.error(sMessage, {
                title: this._oResourceBundle.getText("errorTitle"),
                actions: [MessageBox.Action.CLOSE]
            });
        },

        // 2. Transaksiyonel Onay Diyaloğu (Confirmation Dialog) - Fiori UX Odaklı
        onTriggerDeleteConfirmation: function (sTargetOrderId) {
            var sConfirmPrompt = this._oResourceBundle.getText("deleteConfirmationPrompt", [sTargetOrderId]);

            // Fire asynchronous dialog overlay with protective UX configuration
            MessageBox.show(sConfirmPrompt, {
                icon: MessageBox.Icon.WARNING,
                title: this._oResourceBundle.getText("confirmTitle"),
                actions: [MessageBox.Action.DELETE, MessageBox.Action.CANCEL],
                emphasizedAction: MessageBox.Action.CANCEL, // Highlight safe fallback route
                initialFocus: MessageBox.Action.CANCEL,     // Prevent accidental enter-key trigger
                
                onClose: function (sAction) {
                    // Context control using standard approach
                    if (sAction === MessageBox.Action.DELETE) {
                        this._executeDeletionPipeline(sTargetOrderId);
                    }
                }.bind(this)
            });
        },

        // 3. OData Model Integration with Non-blocking Feedback (MessageToast)
        _executeDeletionPipeline: function (sOrderId) {
            var sPath = this.oODataModel.createKey("/OrderSet", {
                OrderId: sOrderId
            });

            // Trigger absolute data removal via OData V2 Core API
            this.oODataModel.remove(sPath, {
                success: () => {
                    // Arrow function automatically retains 'this' context
                    var sSuccessMsg = this._oResourceBundle.getText("deletionSuccessText");
                    
                    // Display lightweight non-blocking feedback
                    MessageToast.show(sSuccessMsg, {
                        duration: 3000,
                        my: "center bottom",
                        at: "center bottom"
                    });
                },
                error: function (oError) {
                    MessageBox.error("Backend validation framework rejected the deletion lifecycle.");
                }
            });
        },

        // 4. Quick Utility API Variations (Success & Warning)
        onShowOperationalStatus: function (bWarningPattern) {
            if (bWarningPattern) {
                MessageBox.warning(this._oResourceBundle.getText("dependencyWarningText"));
            } else {
                MessageBox.success(this._oResourceBundle.getText("configurationSavedText"));
            }
        }
    });
});

Verpassen Sie nicht den neuen Code in der Bibliothek!

Abonnieren Sie den Newsletter, um sofort über wöchentlich aktualisierte unternehmenseigene SAPUI5/Fiori-Komponenten, Leistungstipps und Architekturentwürfe informiert zu werden.