Entwicklung von SAPUI5 Custom Controls - Beispiele aus der Praxis
In einem vorherigen Blogbeitrag wurde aufgezeigt, welche Vorbereitung die Erstellung von SAPUI5 Custom Controls benötigt und wie diese dann Schritt für Schritt entwickelt werden >>.
Das sich auch komplett neue Controls mit einfachen HTML und CSS Kenntnissen realisieren lassen, wird im nachfolgenden Beitrag aufgezeigt. Wie das genau funktioniert stellen wir anhand von zwei Beispielen aus aktuellen Kundenprojekten vor. Bei der ersten Entwicklung handelt es sich um eine Erweiterung eines bestehenden Controls. Bei der zweiten ist es eine komplette Neu-Entwicklung mit eigener renderer-Funktion.
Erweiterung eines SAPUI5 Custom Controls
Durch die Ausführung einer Setter-Funktion eines Controls wird immer die renderer-Funktion getriggert. Daher muss hier in den entsprechenden mouse-Events dies nicht selbst ausgelöst werden.
Neu-Entwicklung eines Controls
Dieses Chart zeigt immer einen Wert zwischen 0 und 100 an, besteht aus einem Farbverlauf im Balken, soll die Y-Achse in 20er Schritten darstellen und eigene Farben und X-Achsenbeschriftungen entgegennehmen können.
In einfaches HTML runtergebrochen ist dies kein großes Hexenwerk. Es sind lediglich ein paar Labels, Linien und ein Rechteck mit einem Gradienten. Daher wurde hier auf die Verwendung eines Charts-Framework (z.B. D3.js) verzichtet und dies als ein eigenes Custom Control entwickelt. Als Parameter wurden 5 verschiedene Farben, sowie ein Wert und eine X-Achsen Beschriftung erwartet:
- colorBarRGB (Die Farbe, auf welche der transparente Gradient aufgebaut werden soll)
- colorBarAccentRGB (Die Farbe, welche die oberste Linie auf dem Balken darstellen soll)
- colorNumberRGB (Die Farbe, in welcher die angezeigte Zahl dargestellt werden soll)
- colorXAxisRGB (Die Farbe, in welcher die X-Achse dargestellt werden soll)
- colorXAxisDescRGB (Die Farbe, in welcher die X-Achsenbeschreibung dargestellt werden soll)
- value (Der Wert, auf deren Basis der Balken aufgebaut wird)
- xAxisName (Die anzuzeigende X-Achsen Beschriftung)
Fazit
Verfasst von Martika Möller
Weitere spannende Themen aus unserem Newsroom
Shortcuts für SAP BW in Eclipse
In diesem Blogbeitrag werden fünf einfache Shortcuts erläutert, mit denen...
Mehr lesenDatenqualität in SAP BW: Daten ohne Programmierung plausibilisieren
Unsere Standard-Software Q-THOR kann die Datenqualität in SAP BW Systemen...
Mehr lesenSAP HANA Transport mit MS Azure Pipelines
In diesem Beitrag wird das Transport Tool MS Azure Pipelines...
Mehr lesen