SAPUI5: Status- & UI-Kontrollverwaltung mit JSONModel

Ein Leitfaden zur Verwaltung von anwendungsweiten Busy-Indikatoren, Fehlermeldungen, Sichtbarkeit (Visibility) und dynamischen Elementzuständen über ein einziges lokales Modell sowie zur OData-POST-Integration.

In der SAPUI5- und Fiori-Architektur benötigen wir neben den Backend-Modellen (OData) auch lokale Modelle, um den aktuellen Zustand (State) des Bildschirms zu steuern. Anstelle von Spaghetti-Aufrufen wie this.byId("...").setBusy(true) oder setEnabled(), die die Codequalität mindern, ist es ein Unternehmensstandard, die UI-Kontrolle durch bidirektionale Datenbindung (Two-Way Binding) und Expression Binding mit einem deklarativen Ansatz über sap.ui.model.json.JSONModel zu gewährleisten.

💡 Regeln für das UI-Statusmanagement

Deklarative UI-Steuerung: Anstatt die Eigenschaften von Bildschirmkomponenten einzeln im Controller zu ändern, binden Sie sie direkt in der XML-Ansicht an die lokale JSONModel-Architektur (Bind). Anstatt beispielsweise ein separates "submitEnabled"-Feld zu pflegen, vereinfacht das direkte Binden des Aktivierungszustands der Schaltfläche an den asynchronen Busy-Zustand als enabled="{= !${uiState>/busy} }" das Design.
Dynamische Formularbereinigung: Anstatt auf DOM-Elemente zuzugreifen, um Formularfelder zurückzusetzen, ist es die beste Vorgehensweise, den Datensatz des lokalen Modells mit dem Anfangszustandsobjekt (Initial State) zu überschreiben. Wenn setData() auf dem Modell verwendet wird, werden die Bindungen in der Benutzeroberfläche automatisch ausgelöst, sodass danach kein unnötiger refresh(true)-Aufruf erfolgen sollte.
Modernes Kopieren des Zustands: In SAPUI5-Projekten der nächsten Generation sollte zur Reduzierung von veralteten jQuery-Abhängigkeiten für Deep-Copy-Operationen die moderne native JavaScript-API structuredClone() anstelle von jQuery.extend() bevorzugt werden.
🔐 Sicherheit sensibler Daten (POST-Standard): Bei Authentifizierungsprozessen, die sensible Daten wie Benutzernamen und Passwörter beinhalten, dürfen GET-Methoden (GET_ENTITY), die Parameter in der URL hinterlassen, auf keinen Fall verwendet werden. Da diese Daten in Netzwerküberwachungstools und Serverprotokollen sichtbar sind, muss die Transaktion immer in der HTTP-POST-Schicht (CREATE_ENTITY) gekapselt werden.

⚙️ OData-Backend-Service-Konfiguration

Die SEGW-Datenmodell- und ABAP-Schichtarchitektur zur sicheren Verarbeitung von Authentifizierungsanfragen, die vom Frontend per HTTP POST (Payload) gesendet werden.

0. SEGW-Datenmodelldefinition (Entitätstyp)

Im SAP Gateway Service Builder (SEGW) sollte eine Entität mit dem Namen UserAuth erstellt und die folgenden Felder (Properties) definiert werden:

Username (Edm.String, Key, Max Length: 40) -> ABAP Field: USERNAME
Password (Edm.String, Max Length: 40) -> ABAP Field: PASSWORD
Success (Edm.Boolean) -> ABAP Field: SUCCESS
Message (Edm.String, Max Length: 255) -> ABAP Field: MESSAGE

1. ABAP DPC_EXT-Schicht - Erstellen (CREATE_ENTITY)

Die transaktionale Codestruktur, die die vom Frontend im HTTP-POST-Body (Payload) kommenden Daten sicher liest und validiert.

  METHOD userauthset_create_entity.
    DATA: ls_data TYPE zcl_my_auth_mpc=>ts_userauth.

    " Read incoming JSON/XML payload securely from HTTP POST body
    io_data_provider->read_entry_data( IMPORTING es_data = ls_data ).

    " Validate baseline mandatory inputs
    IF ls_data-username IS INITIAL OR ls_data-password IS INITIAL.
      er_entity-username = ls_data-username.
      er_entity-success  = abap_false.
      er_entity-message  = 'Username and password cannot be empty.'.
      RETURN.
    ENDIF.

    " Validate credentials against custom maintenance registry table
    SELECT SINGLE username
      FROM zusr_table
      INTO @DATA(lv_user)
      WHERE username = @ls_data-username
        AND password = @ls_data-password.

    er_entity-username = ls_data-username.
    IF sy-subrc <> 0.
      er_entity-success = abap_false.
      er_entity-message = 'Invalid credentials. Please try again.'.
    ELSE.
      er_entity-success = abap_true.
      er_entity-message = 'Authentication approved.'.
    ENDIF.
  ENDMETHOD.

💻 Frontend-Controller & XML-View-Anwendungsreferenz

2. Controller-Struktur (Main.controller.js)

Definition des lokalen UI-Statusmodells beim Anwendungsstart, moderne structuredClone-Integration und OData-POST-Verwaltung.

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

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

        onInit: function () {
            // Define initial state structure for UI controls
            this._oInitialUiState = {
                busy: false,
                errorMessage: "",
                formData: {
                    username: "",
                    password: ""
                }
            };

            // Instantiate view model using modern native structuredClone
            var oViewModel = new JSONModel(structuredClone(this._oInitialUiState));
            this.getView().setModel(oViewModel, "uiState");
            
            // Get global OData model instance
            this.oODataModel = this.getOwnerComponent().getModel();
        },

        onExecuteProcess: function () {
            var oUiModel = this.getView().getModel("uiState");
            var oForm = oUiModel.getProperty("/formData");

            // Trigger loading state via local model properties
            oUiModel.setProperty("/busy", true);
            oUiModel.setProperty("/errorMessage", "");

            // Construct secure POST payload
            var oPayload = {
                Username: oForm.username,
                Password: oForm.password
            };

            // Execute secure asynchronous OData Create operation (HTTP POST)
            this.oODataModel.create("/UserAuthSet", oPayload, {
                success: function (oData) {
                    oUiModel.setProperty("/busy", false);

                    if (!oData.Success) {
                        oUiModel.setProperty("/errorMessage", oData.Message);
                    } else {
                        // Reset form state seamlessly on successful authentication
                        this.onClearForm();
                    }
                }.bind(this),
                error: function (oError) {
                    oUiModel.setProperty("/busy", false);
                    oUiModel.setProperty("/errorMessage", "An unexpected gateway connection error occurred.");
                }.bind(this)
            });
        },

        onClearForm: function () {
            // Reset the local model back to the initial state using structuredClone
            var oUiModel = this.getView().getModel("uiState");
            oUiModel.setData(structuredClone(this._oInitialUiState));
        }
    });
});

3. View-Struktur (Main.view.xml)

Flexibles Binden des erstellten lokalen Modells an XML-Elemente unter Verwendung von Property-Binding- und Expression-Binding-Mechanismen.

<mvc:View 
    controllerName="ui5.app.controller.Main"
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns="sap.m">

    <Page id="mainPage" title="UI State Management & OData Integration" titleAlignment="Center"
          busy="{uiState>/busy}" busyIndicatorDelay="0">
        
        <VBox class="sapUiMediumMargin" width="400px" justifyContainer="Center">
            
            <Label text="Username" required="true" />
            <Input value="{uiState>/formData/username}" 
                   enabled="{= !${uiState>/busy} }" 
                   placeholder="Enter username" />

            <Label text="Password" required="true" class="sapUiSmallMarginTop" />
            <Input value="{uiState>/formData/password}" 
                   type="Password"
                   enabled="{= !${uiState>/busy} }" 
                   placeholder="Enter password" />

            <!-- Expression Binding: visible only when error message string is not empty -->
            <MessageStrip 
                text="{uiState>/errorMessage}" 
                type="Error" 
                showIcon="true"
                visible="{= !!${uiState>/errorMessage} }"
                class="sapUiSmallMarginTop" />

            <HBox class="sapUiMediumMarginTop">
                <Button text="Execute" 
                        type="Emphasized" 
                        enabled="{= !${uiState>/busy} }" 
                        press="onExecuteProcess" 
                        class="sapUiSmallMarginEnd" />
                        
                <Button text="Clear" 
                        type="Transparent" 
                        press="onClearForm" />
            </HBox>

        </VBox>
        
    </Page>
</mvc:View>

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.