Erweitern von Fiori Apps in SAPUI5

SAP stellt für viele Anwendungsbereiche Standard Fiori Apps bereit. Grundsätzlich ein sehr hilfreicher Service – aber in einigen Fällen passt keine davon auf genau Ihren Anwendungsfall, weil z. B. eine Funktionalität fehlt, zu viele Funktionalitäten enthalten sind oder die Ansicht nicht Ihren Anforderungen entspricht. In diesem Beitrag erfahren Sie, wie Sie Standard-Apps in SAPUI5 nach Ihren Wünschen anpassen können, ohne eine neue App entwickeln zu müssen.

Schritt 1: Gewünschte Standard-App aussuchen

In der Fiori Apps Library können Sie nach einer passenden Standard-App suchen. Ich werde als Beispiel die App „My Inbox” erweitern.

Unter dem Reiter „Implementation Information“ > „Extensibility“ finden Sie die Anpassungsmöglichkeiten, die SAP Ihnen für diese App bereitstellt.

SAP Fiori Anpassung

informieren

Zur Erweiterung gibt es grundsätzlich 3 Möglichkeiten:

• Extension Points in Views
• UI Controller Extensions
• Erweiterung von OData-Services im Backend

Über die Extension Points in Views lassen sich die Ansichten nach Ihren Wünschen anpassen. Beispielsweise können Sie bestimmte Reiter oder Buttons hinzufügen, entfernen oder optische Anpassungen vornehmen.

Abbildung 2: Extension Points in Views

Über die UI Controller Extensions lassen sich die Front-End-Funktionalitäten anpassen. Möchten Sie zum Beispiel ein Bestätigungsfenster einblenden lassen, wenn ein Button geklickt wird, oder eine Bestätigung überspringen, haben Sie hier die Möglichkeit dazu.

Abbildung 3: UI Controller Extensions

Über die Erweiterung von OData-Services im Backend können Sie im Backend BAdIs implementieren. Damit können Sie Daten, die aus dem Frontend ankommen oder an das Frontend übergeben werden, modifizieren oder anderen Code ausführen, sobald Daten geändert werden.

Abbildung 4: Erweiterung von OData-Services im Backend

Schritt 2: Erweiterungsprojekt anlegen

Über einen Rechtsklick auf ein beliebiges Element im File Explorer Ihrer Web IDE können Sie über „New“ > „Extension Project“ ein neues Erweiterungsprojekt anlegen. Nachdem Sie Ihr System ausgewählt haben, können Sie nach Ihrer gewünschten App suchen, in meinem Fall die My-Inbox-App, und diese auswählen.

Abbildung 5: New Extension Project My Inbox

Daraufhin wählen Sie die zu erweiternde View und den gewünschten Extension Point aus, den Sie sich in der Fiori Apps Library ausgesucht haben, und klicken auf „Finish“.

Abbildung 6: Extension Point Selection My Inbox

Schritt 3: Erweitern

Nun sehen Sie die Standard-App in einer Vorschau. Über den „Extensibility Mode“ können Sie bereits jetzt nach dem Auswählen eines Elementes über „Extend“ > „Hide Control“ bestimmte Elemente ausblenden. Ich blende hier den Kommentar-Reiter aus.

Abbildung 7: Hide Control My Inbox

Die Änderung können Sie in der „manifest.json“ sehen und auch schnell wieder bearbeiten:

Abbildung 8: manifest.json

Im Controller oder der View können Sie nun Ihre Anpassungen vornehmen. Öffnen Sie hierfür nur den entsprechenden Controller oder die entsprechende View und nehmen Sie Ihre Anpassungen vor.

In meinem Beispiel habe ich einen Text geändert und ein kleines Pop-up bei der Auswahl eines Elementes hinzugefügt:

Abbildung 9: Angepasste My Inbox

Wichtig zu beachten ist hierbei, dass Ihre „My Inbox” in der Standard-Version weiterhin vorliegt. Sie bearbeiten lediglich Kopien von Controllern/Views oder bearbeiten Fragmente und erstellen daraus eine eigene App bzw. ein Erweiterungsprojekt. Diese(s) müssen Sie noch deployen, sonst sehen Sie weiterhin nur die Standard-App.

E-Book: SAP Mobile Apps

In diesem E-Book erhalten Sie einen umfassenden Überblick über SAP mobile Apps – verstehen Sie es als einen Wegweiser durch den mobilen Dschungel.

Jetzt anfordern

E-Book: SAP Mobile Apps

×

Haben Sie weitere Fragen?

Sie haben weitere Fragen oder Probleme beim Erweitern Ihrer SAPUI5-Standard-App? Die Erweiterung reicht Ihnen nicht aus und Sie brauchen eine Eigenentwicklung? Gerne stehe Ich Ihnen für Fragen zur Verfügung. Kommentieren Sie hierfür einfach unter diesem Artikel oder kontaktieren Sie mich persönlich.