Pimp my Component: Kreative Lösungen mit SAPUI5

SAPUI5 ist wandelbar wie ein Chamäleon. Das UI-Framework von SAP bietet vielfältige Einsatzmöglichkeiten zur Entwicklung von Webanwendungen. Diese Wandelbarkeit ist jedoch nicht gleichzusetzen mit einem chaotischen User Interface. Im Gegenteil: UI5 entfaltet seine Wirkungskraft vor allem in Kombination mit den SAP Fiori Designprinzipien, die für eine Vielzahl von Standard-Anwendungsfällen konkrete Empfehlungen zu User Experience (UX) und User Interface (UI) Design beinhalten.

Das Beste daran ist, dass sowohl Fiori als auch das lizenzfreie OpenUI5 auch außerhalb des SAP-Kosmos eingesetzt werden können. So eignet sich das Framework insbesondere für Anwendungen mit vielfältigen Verwaltungsmasken, die Wert auf Nutzerfreundlichkeit legen.

Dies war auch der Fall bei dem von uns entwickelten bundesweiten Weiterbildungsportal der Hochschulen „hoch & weit“. Dieses besteht nicht nur aus dem öffentlichen Portal, sondern umfasst auch eine Verwaltungsanwendung, über welche die Hochschulen ihre Weiterbildungen pflegen können. Individuelle Softwarelösungen erfordern dabei oftmals etwas Kreativität. Anstatt wie üblich Komponente um Komponente neu zusammenzusetzen, haben wir die Wandelbarkeit von SAPUI5 genutzt, um unsere Komponenten einfach aufzumotzen.

Das große Ganze kann sich unterschiedlich zusammensetzen (© unsplash - drmakete lab)

Der klassische Weg

Gerade in größeren Entwicklungsprojekten spielt die Komponentisierung von Software eine wichtige Rolle. Die passende Strukturierung in einzelne technisch oder inhaltlich gekapselte Anwendungsteile ermöglicht es, diese weitestgehend unabhängig zu entwickeln, zu testen und wiederverwendbar einzusetzen. 

Die Komponenten stellen dabei kleinere, in sich geschlossene Teile einer größeren Anwendung dar und werden letztendlich zu der fertigen Anwendung zusammengetragen. Dabei beinhaltet und verwaltet jede Komponente ihre eigenen Ressourcen, wie z.B. Servicemodule für Datenzugriffe oder Validierungslogik, um möglichst unabhängig zu bleiben.

Unabhängige Komponenten bilden zusammen die Endanwendung  © eXXcellent solutions

Auch in UI5 sind Komponenten ein zentrales technisches Konzept, das bei dieser Aufteilung hilft, und das wir in der Entwicklung von hoch & weit vielfach eingesetzt haben.  

Das wichtigste und zugleich komplexeste Element sind die Weiterbildungsangebote. Diese sind mit etlichen weiteren Daten verknüpft, wie z.B. Ansprechpartner, Kontaktstellen, Bildungsträger und Hochschulportraits, die ebenfalls über das Portal verwaltet werden. Die Verwaltung dieser Daten folgt oftmals dem gleichen Schema, beinhaltet aber unterschiedliche Verarbeitungslogiken und kommt aus unterschiedlichen Datenquellen. Um bei der Entwicklung und Wartung all dieser Bereiche den Überblick behalten zu können, werden sie in unterschiedliche Verwaltungskomponenten gekapselt.

Die Komponenten können sich dabei nicht nur in ihren Funktionen unterscheiden, sondern auch hinsichtlich ihres Umfangs, von einer kleinen Schaltfläche bis hin zu einer fast vollständigen Anwendung. Ein typisches Beispiel für eine solche (größere) Komponente ist die List-Detail-Komponente – eine Liste von Geschäftsobjekten mit einer dazugehörigen Detail- und Bearbeitungsansicht, die in SAP Fiori zu den Standard-Layouts gehört. Auch diese kann wiederum in mehr oder weniger komplexen Ausführungen vorkommen.

Komplexe List-Detail-Komponente  mit vielfältigen Filtern, Eingabefeldern und Validierungslogiken © eXXcellent solutions

Pimp #1: Zwei in eins

Die obenstehende Komponente für Weiterbildungsangebote basiert ebenfalls auf diesem Layout. Durch umfangreiche Formulare, komplexe Validierung von Benutzereingaben sowie vielfältige Such- und Filtermöglichkeiten, ist sie sehr leistungsstark aber auch entsprechend „schwerfällig“.  Das heißt, dass sie in diesem Umfang und Spezialisierungsgrad nur schwer umzubauen oder wiederzuverwenden wäre.   

Diese Funktionen sind in der Endanwendung jedoch noch für einen zweiten Use Case vorgesehen: Neben Weiterbildungsangeboten sollten hier auch Studiengänge angezeigt werden, die aus dem Hochschulkompass der Hochschulrektorenkonferenz stammen. Zur Anzeige in „hoch & weit“, müssen diese jedoch überführt und um entsprechende Angaben ergänzt werden.

Die Komponente zu kopieren und anzupassen war aufgrund ihrer Komplexität und des Ausmaßes der technischen Überschneidungen nicht realistisch. Weiterentwicklungen hätten hier für beide Versionen erfolgen müssen – mit entsprechend hohem Aufwand und Fehlerrisiko. Die Herausforderung bestand also im Finden einer Lösung, die uns erlaubt, die bestehende Funktionalität der Komponente zu variieren, ohne sie zu duplizieren.

Variation durch Modi

Mittels UI5 haben wir zwei unterschiedliche Laufzeit-Instanzen erstellt und über unterschiedlich gesetzte Parameter zwei Modi konfiguriert für ein und dieselbe Komponente. Dies ermöglicht uns, lediglich den Modus im Code an die verschiedenen Use Cases anzupassen, und gleichzeitig den überwiegenden Teil der Komponente unberührt zu lassen. So haben wir zwei Funktionen durch eine Komponente abgedeckt: Modus A.1 = Weiterbildungsangebote, Modus A.2 = Studiengänge. Eben zwei in eins.

List-Detail-Komponente mit zwei unterschiedlichen Modi © eXXcellent solutions

Pimp #2: Re-Use

An diesem Punkt gingen wir noch einen Schritt weiter. Die Daten, die von dieser Komponente verwaltet und aufbereitet werden, benötigt man noch an weiteren Stellen und in unterschiedlichen Darstellungen auf dem Portal: In Form verschiedener Übersichtslisten und als Schaltfläche mit gesammelten Angaben für ein Dashboard. Durch die Konfiguration der Komponente konnten wir die unterschiedlichen Darstellungen inklusive der Daten durch die besagte Komponente bereitstellen.

Diesmal haben wir nicht zwei unterschiedliche Operations-Modi festgelegt, sondern die Framework-Methode überschrieben, die für das Generieren der Darstellung einer Komponente zuständig ist. Anhand unserer konfigurierten Parameter konnten wir so das Ausgabeformat selbst bestimmen.

Übersichtslisten auf dem Dashboard, generiert aus unserer Komponente © eXXcellent solutions

Zusammengefasst konnten durch Pimp #1 inhaltlich unterschiedliche Daten von der Komponente auf die gleiche Art und Weise verarbeitet und dargestellt werden. Durch Pimp #2 konnten ein und dieselben Daten auf unterschiedliche Art und Weise dargestellt werden – und das alles durch eine Komponente! Potenzielle Änderungen sind so weiterhin nur an einer Stelle, d.h. in der Komponente selbst, notwendig.

Durch die Konfigurierbarkeit von Komponenten konnten wir eine hohe Entwicklungseffizienz für die vorliegenden Anwendungsfälle erreichen. Indem wir nur eine Komponente pflegen, die an mehreren Stellen derselben Anwendung genutzt wird, vermeiden wir unnötigen Code und anfällige Duplikate. 

Unsere kreativen Variationen durften wir auch auf der UI5con 2022 vorstellen. Hier geht's zum Vortrag und hier zum dazugehörigen Beispielprojekt.

Weitere Informationen