Einleitung

Die Anpassung einer Standard-Fiori-Anwendung an spezifische Geschäftsanforderungen kann unkompliziert sein, wenn sie systematisch angegangen wird. Dieser Leitfaden beschreibt drei Schritte für kleinere Anpassungen wie die Einschränkung von Dropdown-Werten, das Deaktivieren von Buttons oder kleine UI-Änderungen, ohne das Gesamtdesign der App zu verändern. Wir beginnen mit der Überprüfung der Backend-Konfigurationen, gehen dann zur Verwendung von Adapt UI für einfache Anpassungen über und erkunden schließlich erweiterte Anpassungen in BAS.

Schritt-für-Schritt-Prozess

1. Backend-Konfiguration prüfen

Zunächst bestimmen Sie, ob die gewünschte Änderung durch Backend-Einstellungen wie OData-Services oder Berechtigungen erreicht werden kann. Um beispielsweise Dropdown-Werte einzuschränken, identifizieren Sie den OData-Service mithilfe der Fiori App Reference Library (Fiori Library) oder Browser-Entwicklertools und prüfen dann, ob Berechtigungen den Datenzugriff begrenzen können. Koordinieren Sie mit Ihrem Sicherheitsteam, um diese Einstellungen zu konfigurieren.

2. Adapt UI für einfache UI-Anpassungen verwenden

Falls Backend-Änderungen nicht ausreichen, verwenden Sie Adapt UI für UI-bezogene Anpassungen wie das Ausblenden von Buttons. Aktivieren Sie den Anpassungsmodus im Fiori Launchpad, nehmen Sie Änderungen vor (z.B. Controls ausblenden) und speichern Sie diese als App-Variante. Beachten Sie, dass das Deaktivieren von Controls (sie sichtbar aber nicht-interaktiv machen) hier möglicherweise nicht unterstützt wird, fahren Sie daher bei Bedarf mit Schritt 3 fort. Weisen Sie die Variante über das Berechtigungsteam der Zielbenutzergruppe zu.

3. Anpassungsprojekt in BAS für erweiterte Änderungen erstellen

Für komplexe Modifikationen wie das Deaktivieren von Controls verwenden Sie SAP Business Application Studio (BAS). Richten Sie ein Anpassungsprojekt ein, modifizieren Sie die Views und Controller der App mithilfe des Anpassungseditors und stellen Sie die Variante bereit. Für control-spezifische Eigenschaften konsultieren Sie das UI5 SDK (UI5 SDK), um modifizierbare Eigenschaften zu verstehen.

Hintergrund und Kontext

Standard-Fiori-Anwendungen, Teil von SAPs User Experience Framework, sind vorgefertigt und für breite Nutzbarkeit konzipiert. Unternehmen benötigen jedoch oft kleine Anpassungen, um spezifische Anforderungen zu erfüllen, wie die Einschränkung der Datensichtbarkeit oder die Modifikation von UI-Elementen. Dieser Leitfaden adressiert diese Bedürfnisse und beginnt mit einer anschaulichen Analogie: „Haben Sie schon einmal versucht, in ein Paar Schuhe zu schlüpfen, das fast perfekt ist, aber einfach ein bisschen zu eng oder zu weit? So ähnlich ist es mit Standard-Fiori-Apps – sie sind großartig, aber manchmal brauchen sie eine kleine Anpassung, um perfekt zu Ihrem Unternehmen zu passen.“

Der Prozess beginnt mit der Prüfung, ob Änderungen durch Backend-Konfigurationen erreicht werden können, wobei bestehende OData-Services und Berechtigungen genutzt werden. Falls nicht, geht er zur Verwendung von Adapt UI für einfache UI-Anpassungen über und für erweiterte Anforderungen zur Erstellung eines Anpassungsprojekts in SAP Business Application Studio (BAS). Dieser Ansatz gewährleistet minimale Störungen und erhält die Upgrade-Kompatibilität.

Schritt 1: Backend-Konfiguration prüfen

Zunächst bestimmen wir, ob die gewünschte Änderung durch Backend-Einstellungen wie OData-Services oder Berechtigungen erreicht werden kann. Dies ist weniger invasiv und oft effizienter, besonders für datenbasierte Änderungen wie Dropdown-Einschränkungen.

Identifizierung des Controls: Beginnen Sie mit der Identifizierung des zu ändernden Controls, wie einem Dropdown oder Button. Beispielsweise möchte ein Unternehmen möglicherweise ein Dropdown mit Bestelltypen auf bestimmte Werte für spezifische Benutzer beschränken.

Bestimmung des Änderungstyps: Unterscheiden Sie zwischen datenbezogenen und UI-bezogenen Änderungen. Datenbezogene Änderungen wie Dropdown-Einschränkungen gehen zur OData-Service-Analyse über, während UI-bezogene Änderungen wie das Deaktivieren von Buttons zu Schritt 2 führen.

OData-Service finden: Es gibt zwei Methoden:

Methode 1: Verwenden Sie die Fiori App Reference Library, um die OData-Services der App zu finden und detaillierte Dokumentation zu den Features jeder App zu erhalten.

Methode 2: Aktivieren Sie die Entwicklertools im Browser (z.B. F12 in Chrome oder Ctrl+Shift+I), navigieren Sie zur App und inspizieren Sie Netzwerkanfragen. Suchen Sie nach URLs, die mit „/sap/opu/odata/“ beginnen, um OData-Aufrufe zu identifizieren.

OData-Service-Metadaten analysieren: Hängen Sie „/$metadata“ an die OData-URL an, um deren Struktur zu betrachten. Für ein Dropdown finden Sie beispielsweise das Entity Set, das Daten bereitstellt, und prüfen auf Filter oder Parameter, die Werte einschränken können, wie die Filterung nach Benutzerrolle.

Berechtigungen prüfen: Untersuchen Sie, ob Berechtigungsobjekte oder Backend-Konfigurationen Daten begrenzen können. In SAP-Systemen, besonders ABAP-basierten, werden Berechtigungen durch Objekte und Profile verwaltet. Koordinieren Sie mit dem Sicherheitsteam, um Rollen einzurichten und sicherzustellen, dass nur gewünschte Daten sichtbar sind.

Ein Beispiel: Im Service MMIM_MATDOC_SRV können Sie bewegungstypbasierte Filter für bestimmte Benutzer konfigurieren. Die Service-Implementierung in der DPC-Erweiterungsklasse ist MANAGEDSTOCKTYPE_GETENTITYSET(), wo bereits vorhandene Hooks für Berechtigungsobjekte diese Einschränkung ermöglichen.

Dieser Schritt ist entscheidend, da er bestehende Systemfähigkeiten nutzt und den Bedarf an App-Modifikationen reduziert. Er erfordert jedoch Koordination mit Systemadministratoren, und die Machbarkeit hängt von der Backend-Implementierung ab.

Schritt 2: Adapt UI für einfache UI-Anpassungen verwenden

Falls Backend-Änderungen nicht ausreichen, besonders für UI-bezogene Modifikationen wie das Ausblenden von Buttons, verwenden Sie das Adapt UI-Feature. Dies ermöglicht Endbenutzern, die UI anzupassen, ohne den zugrunde liegenden Code zu ändern, und Änderungen als App-Varianten zu speichern.

Adapt UI aktivieren: Stellen Sie sicher, dass das Fiori Launchpad für Anpassungen konfiguriert ist. Benutzer benötigen Rollen wie SAP_UI_FLEX_KEY_USER dafür.

Anpassungsmodus aktivieren: Melden Sie sich mit entsprechenden Berechtigungen an, öffnen Sie die App und suchen Sie nach dem „Anpassen“-Button, normalerweise in der oberen rechten Ecke, um den Anpassungsmodus zu aktivieren.

Als App-Variante speichern: Nach den Änderungen speichern Sie diese als neue App-Variante, benennen sie und spezifizieren die Zielbenutzergruppe. Diese Variante kann unter Benutzern geteilt werden und erhält die Integrität der Standard-App.

Variante zuweisen: Das Berechtigungsteam weist diese Variante der Zielbenutzergruppe zu und stellt sicher, dass nur beabsichtigte Benutzer die angepasste UI sehen.

Dieser Schritt eignet sich ideal für einfache UI-Anpassungen, hat aber Einschränkungen, besonders beim Deaktivieren von Controls, was möglicherweise den Übergang zu Schritt 3 erfordert.

Schritt 3: Anpassungsprojekt in BAS für erweiterte Änderungen erstellen

Für komplexe Änderungen wie das Deaktivieren von Controls oder das Hinzufügen benutzerdefinierter Logik verwenden Sie die SAP Business Application Studio (BAS), eine Entwicklungsumgebung für SAP BTP. Dies beinhaltet das Erstellen eines Anpassungsprojekts zur Modifikation der App-Variante und bietet mehr Flexibilität.

BAS einrichten: Stellen Sie sicher, dass BAS installiert und so konfiguriert ist, dass es sich mit Ihrem System verbinden kann, und folgen Sie dabei den Einrichtungsleitfäden, wie z. B. denen im SAP Help Portal.

Anpassungsprojekt erstellen: Erstellen Sie in BAS ein neues SAPUI5-Anpassungsprojekt, wählen Sie das Zielsystem (z.B. ABAP oder Cloud Foundry) und die anzupassende Fiori-App. Wählen Sie einen Projektnamen (oft mit Z-Präfix für Klarheit) und die SAPUI5-Version (empfohlen wird die neueste stabile Version).

Änderungen vornehmen: Verwenden Sie den Anpassungseditor zum Ändern von Ansichten und Controllern. Um z. B. eine Schaltfläche zu deaktivieren, ändern Sie die Eigenschaft „enabled“ in der Ansicht oder dem Controller, wofür Sie Kenntnisse in UI5 und JavaScript benötigen. Für steuerungsspezifische Eigenschaften lesen Sie bitte das UI5 SDK (UI5 SDK), um die veränderbaren Eigenschaften wie „sichtbar“ oder „aktiviert“ für Schaltflächen zu verstehen.

Anpassungsschritte

1. Anpassungseditor öffnen: Navigieren Sie in Ihrem neu erstellten Projekt zum Anpassungseditor.

Sie finden ihn im Tools-Menü oder durch Rechtsklick auf das Projekt und Auswahl „Anpassungseditor öffnen“.

2. Änderungen vornehmen: Verwenden Sie den Anpassungseditor, um die UI-Komponenten der Fiori-App zu modifizieren. Sie können UI-Elemente nach Bedarf hinzufügen, entfernen oder ändern. Speichern Sie Ihre Änderungen regelmäßig.

Verwenden Sie immer das UI5 SDK als Referenz, um bestehende Eigenschaften eines Controls zu ändern oder zu modifizieren. Stellen Sie auch sicher, dass veraltete Eigenschaften entsprechend der aktuellen UI5-Version vermieden werden.

3. Controller-Erweiterungen hinzufügen: Zusätzlich zu UI-Änderungen können Sie auch Controller-Erweiterungen hinzufügen, um die Funktionalität der Fiori-App zu erweitern. Dies ermöglicht es Ihnen, benutzerdefinierte Logik zu implementieren und zusätzliche Ereignisse zu behandeln.

Erweiterungs-Programmierung

Im Anpassungsprojekt ist es möglich, entweder die Methoden des erweiterten Controllers zu überschreiben (seien Sie hier vorsichtig), eigene Methoden zu definieren und auszuführen sowie die Lifecycle-Methoden der Standard-App zu überschreiben.

Beim Überschreiben von Lifecycle-Methoden beachten Sie, dass Ihr Code in der Erweiterung den Code der Standard-App nicht ersetzt – vielmehr wird Ihr Code vor oder nach der Lifecycle-Methode der Standard-App aufgerufen.

Lifecycle-Ausführungsreihenfolge

In beiden Fällen führt UI5 die Lifecycle-Methoden standardmäßig in der folgenden Reihenfolge aus:

Quelle: UI5-Erweiterung von Controller und Lifecycle-Methoden
(Wenn du diesen Link klickst, verlässt du unsere Website)

Der Kontext der Controller-Erweiterung kann abgerufen werden über:

(im Debugger). Der Kontext des erweiterten Controllers kann abgerufen werden über:

Controller der aktuellen View:

Hilfreiche Techniken

Weitere hilfreiche Techniken, die nützlich sein können:

UI5-Ereignisbehandlung

jQuery-Grundlagen

• Um ein Control abzurufen, wenn es verfügbar ist (vollständig gerendert und mit verfügbaren Daten)
• Um automatisch in einem Abschnitt hoch und runter zu scrollen

Mögliche Probleme

• Mehr als ein Erweiterungsprojekt könnte beim Navigieren zu einer Detailansicht erforderlich sein (prüfen Sie die App-ID nach der Navigation)
• Wenn die Standard-App das OData v4-Model verwendet, kann es sehr schwierig sein, die an die View gebundenen Daten abzurufen. Da die Model-/Kontext-Methoden getProperty() und getObject() im v4-Model nicht verfügbar sind. Bei einem Binding (aus der View abrufen) ist es möglich, die Methode requestObject() zu verwenden, die dann ein Promise zurückgibt:

4. Änderungen speichern

Nach dem Speichern der Änderungen werden die Änderungen und Controller-Erweiterungen zum App-Verzeichnis und zur manifest.appdescriptor-Datei hinzugefügt.

Tipp: Der Anpassungseditor bietet eine visuelle Benutzeroberfläche, die es einfacher macht, die Auswirkungen Ihrer Änderungen in Echtzeit zu sehen.

5. Änderungen testen

Testen Sie die modifizierte App-Variante in BAS, um die Funktionalität sicherzustellen und zu überprüfen, dass Änderungen wie das Deaktivieren eines Buttons wie erwartet funktionieren. Zum Beispiel hier das Kostenstellenfeld – nicht mehr editierbar, wie gefordert.

6. Variante bereitstellen

Stellen Sie die Variante gemäß den Systemverfahren bereit, stellen Sie Kompatibilität sicher und handhaben Sie Transportanfragen korrekt, was oft ein ABAP-Paket und eine Transportanfrage erfordert.

Vergleichende Analyse

Die drei Schritte decken verschiedene Komplexitätsstufen ab:

Fazit und Empfehlungen

Die Verbesserung von Standard-Fiori-Anwendungen erfordert einen strukturierten Ansatz: Beginnen Sie mit Backend-Prüfungen, gehen Sie zu Adapt UI für UI-Anpassungen über und verwenden Sie BAS für erweiterte Anpassungen.

Beginnen Sie immer mit der am wenigsten invasiven Methode und eskalieren Sie bei Bedarf. Koordinieren Sie mit Sicherheits- und Berechtigungsteams für Backend-Änderungen, stellen Sie entsprechende Rollen für Adapt UI sicher und nutzen Sie Entwicklerexpertise für BAS-Anpassungen.

Für weitere Informationen konsultieren Sie die Fiori App Reference Library, das UI5 SDK und die BAS-Dokumentation.

Wichtige Quellen:

• Fiori App Reference Library Detailed Documentation
• SAPUI5 SDK Comprehensive Control Properties Guide
• SAP Business Application Studio Setup and Usage Guide