SAPUI5: Dynamische Dialog- und Pop-up-Verwaltung mit sap.ui.core.Fragment

Ein Leitfaden zu asynchronen Fragment-Ladestandards, der sicheren Anbindung von Dialogfenstern an die Haupt-Controller-Schicht, ID Federation und moderner Speicheroptimierung (Memory Management).

In der SAPUI5-Architektur werden Fragmente verwendet, um das Aufblähen der Hauptansichtsdateien (XML View) zu verhindern und modulare Bildschirmkomponenten (z. B. Value Help-Dialoge, Filterpanels, Pop-up-Fenster) zu erstellen. Im Gegensatz zu einer Standard-View-Datei haben Fragmente keinen eigenen Controller; sie erben den Controller-Kontext der Seite, von der sie aufgerufen werden. In diesem Leitfaden behandeln wir die Dialogverwaltung mit der asynchronen loadFragment API und die Regeln zur Vermeidung von Speicherlecks gemäß modernen SAPUI5-Standards.

💡 Regeln für die Fragment- und Dialogverwaltung

Moderne asynchrone Ladestandards: Die synchrone Methode sap.ui.xmlfragment(), die oft in älteren Szenarien anzutreffen ist, ist eine veraltete API, da sie den Browser-Thread blockiert, und wird für Neuentwicklungen strikt nicht empfohlen. Stattdessen sollte die vollständig auf Promises basierende und asynchron arbeitende this.loadFragment() Architektur verwendet werden.
Beziehung zwischen this.loadFragment() und addDependent(): Bei herkömmlichen Methoden musste ein extern geladenes Fragment manuell mit oView.addDependent(oDialog) als abhängig deklariert werden, um auf die Modelle (OData, i18n, JSON) und den Lebenszyklus der Hauptseite zugreifen zu können. Die moderne this.loadFragment() API vereinfacht den Code, indem sie diese Abhängigkeitszuweisung automatisch im Hintergrund durchführt.
ID Federation (Sicherer Zugriff auf Komponenten): Wenn ein Fragment geladen wird, wird es automatisch mit dem ID-Namensraum der Hauptseite zusammengeführt (ID Federation). Dadurch können wir sicher auf die ID eines Steuerelements innerhalb des Fragments direkt von der Haupt-Controller-Schicht aus mit dem this.byId("fragmentIçindekiElementId") Standard zugreifen und diese manipulieren.
Close vs. Destroy (Unterschied im Lebenszyklus): Die Methode close(), die ausgelöst wird, wenn der Benutzer auf die Schließen-Schaltfläche eines Pop-ups klickt, verbirgt das Dialogfenster nur visuell; das Objekt bleibt im Speicher des Browsers (DOM) erhalten. Wenn die Seite vollständig verlassen wird (onExit), ist es eine unternehmensweite Anforderung, diese Objekte mit der Methode destroy() vollständig zu zerstören, um zu verhindern, dass sie den Speicher aufblähen (Memory Leak).

💻 Referenz zur Implementierung von Controller & XML-Fragment

0. Fragment-Ansichtsstruktur (DetailDialog.fragment.xml)

Ein modulares asynchrones Design, das keine Controller-Definition enthält und dessen interne Elemente von der Hauptseite aus mit eindeutigen IDs zugänglich sind.

<core:FragmentDefinition
    xmlns:core="sap.ui.core"
    xmlns="sap.m">
    
    <Dialog id="entryDetailDialog" 
            title="Operational Item Details" 
            type="Standard">
        
        <content>
            <VBox class="sapUiMediumMargin" width="320px">
                <!-- This input field will be accessed dynamically via ID Federation -->
                <Input id="inpDialogNote" placeholder="Enter status justification note" />
            </VBox>
        </content>
        
        <beginButton>
            <Button text="Confirm" type="Emphasized" press="onConfirmDialogAction" />
        </beginButton>
        <endButton>
            <Button text="Dismiss" type="Transparent" press="onCloseDetailDialog" />
        </endButton>
        
    </Dialog>
</core:FragmentDefinition>

1. Asynchrone Verwaltung in der Controller-Schicht (Main.controller.js)

Laden des Dialogfensters als einzelne Instanz nach dem Singleton-Muster, Elementmanipulation mit ID Federation und sicheres Speichermanagement beim Verlassen (safe-exit).

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

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

        onInit: function () {
            // Track the dialog lifecycle reference explicitly
            this._oDetailDialog = null;
        },

        onOpenDetailDialog: function () {
            var oView = this.getView();

            // 1. Singleton Pattern: Prevent multiple instantiations of the same DOM elements
            if (!this._oDetailDialog) {
                oView.setBusy(true);

                // Load the XML fragment asynchronously. Arka planda addDependent otomatik tetiklenir.
                this.loadFragment({
                    name: "ui5.app.view.DetailDialog"
                }).then(function (oDialog) {
                    oView.setBusy(false);
                    this._oDetailDialog = oDialog;
                    
                    // Trigger overlay display
                    this._oDetailDialog.open();
                }.bind(this)).catch(function (oError) {
                    oView.setBusy(false);
                    console.error("Asynchronous fragment initialization aborted: ", oError);
                });
            } else {
                this._oDetailDialog.open();
            }
        },

        onConfirmDialogAction: function () {
            // 2. ID Federation: Access fragment elements directly using standard this.byId() API
            var oNoteInput = this.byId("inpDialogNote");
            if (oNoteInput) {
                var sUserValue = oNoteInput.getValue();
                console.log("Retrieved secured value from fragment layout: " + sUserValue);
            }

            this.onCloseDetailDialog();
        },

        onCloseDetailDialog: function () {
            // Close merely hides the control from UI, preservation remains active
            if (this._oDetailDialog && this._oDetailDialog.isOpen()) {
                this._oDetailDialog.close();
            }
        },

        onExit: function () {
            // Best Practice: Fully clear and evict object allocations to eliminate memory leaks
            if (this._oDetailDialog) {
                this._oDetailDialog.destroy();
                this._oDetailDialog = null;
            }
        }
    });
});

Verpassen Sie nicht den neuen Code in der Bibliothek!

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