Ent­wicklung von SAPUI5 Custom Controls - Bei­spiele aus der Praxis​

In einem vor­herigen Blog­bei­trag wurde auf­ge­zeigt, welche Vor­be­rei­tung die Er­stellung von SAPUI5 Custom Controls ben­ötigt und wie diese dann Schritt für Schritt ent­wickelt werden >>.
Das sich auch komplett neue Controls mit einfachen HTML und CSS Kennt­­nissen rea­­lisieren lassen, wird im nach­folgenden Beitrag auf­ge­zeigt. Wie das genau funkt­ioniert stellen wir anhand von zwei Bei­spielen aus aktuellen Kunden­proj­ekten vor­. Bei der ersten Ent­wicklung handelt es sich um eine Er­weiterung eines be­stehenden Controls. Bei der zweiten ist es eine komplette Neu-Entwicklung mit eigener renderer-Funktion.

Er­weiterung eines SAPUI5 Custom Controls

Die Er­weiterung kommt von einer Desktop-Applikation, welche für mobile End­geräte nicht zur Ver­fügung steht. Das Design-Team im Projekt wollte einen Button, der auf Mouse-Hover unter­schiedliche Farben und Icons dar­stellt. Links sieht man ein Icon / Button mit einem Haken als Icon. Hovert man mit der Maus über dieses Icon, tauscht es sich zu einem Blei­stift-Icon aus.
SAPUI5 Custom Controls
SAPUI5 Custom Controls
SAPUI5 Custom Controls
Bei dem vor­liegen­dem Bei­spiel bietet es sich an, ein be­stehendes Control zu er­weitern. So können die be­stehenden Funk­tionalitäten wie z.B. Properties, Events oder Aggregations normal weiter­ver­wendet werden. Wir haben uns für eine Er­weiterung des Controls sap.ui.core.Icon en­tschieden, da dort bereits das Property für hoverColor vor­handen ist. Somit musste ledig­lich ein Aus­tausch des Icons vor­genommen werden.
Das sap.ui.core.Icon besitzt bereits das Property „src“ für die Angabe eines Icons. In unserem Custom Control haben wir zwei neue Properties er­zeugt, die „defaultSrc“ und „hoverSrc“ heißen. Sobald das Mouse-Event „onmouseover“ aus­gelöst wird, wird der Wert aus dem hoverSRC in das be­stehende src ge­schrieben. Wird im Anschluss wieder das „onmouseout“ aus­geführt, wird das defaultSRC in src ge­schrieben. Durch die Ver­wendung der bereits bes­tehenden setSrc-Funktion aus dem Ursprungs­control muss das Rendering nicht ange­passt werden. Es wird im Hinter­grund nur das Icon aus­getauscht.

Durch die Ausführung einer Setter-Funktion eines Controls wird immer die renderer-Funk­tion ge­triggert. Daher muss hier in den ent­sprechen­den mouse-Events dies nicht selbst ausgelöst werden.

Neu-Ent­wicklung eines Controls

In einem weiteren Bei­spiel sollte ein be­stimmtes Chart ge­baut werden, welches im Standard von SAPUI5 so nicht vor­kommt.

Dieses Chart zeigt immer einen Wert zwischen 0 und 100 an, be­steht aus einem Farb­verlauf im Balken, soll die Y-Achse in 20er Schritten dar­stellen und eigene Farben und X-Achsen­be­schrif­tungen ent­gegen­nehmen können.
In einfaches HTML runter­ge­brochen ist dies kein großes Hexenwerk. Es sind ledig­lich ein paar Labels, Linien und ein Rech­teck mit einem Gradienten. Daher wurde hier auf die Verwendung eines Charts-Framework (z.B. D3.js) ver­zichtet und dies als ein eigenes Custom Control entwickelt. Als Parameter wurden 5 ver­schiedene Farben, sowie ein Wert und eine X-Achsen Be­schriftung erwartet:

  • colorBarRGB (Die Farbe, auf welche der trans­pa­rente Gradient auf­gebaut werden soll)
  • colorBarAccentRGB (Die Farbe, welche die oberste Linie auf dem Balken dar­stellen soll)
  • colorNumberRGB (Die Farbe, in welcher die an­ge­zeigte Zahl dar­ge­stellt werden soll)
  • colorXAxisRGB (Die Farbe, in welcher die X-Achse dar­ge­stellt werden soll)
  • colorXAxisDescRGB (Die Farbe, in welcher die X-Achsen­be­schrei­bung dar­gestellt werden soll)
  • value (Der Wert, auf deren Basis der Balken auf­gebaut wird)
  • xAxisName (Die an­zu­zeigende X-Achsen Beschriftung)
Die Renderer-Funktion sieht zunächst folgender­maßen aus:
Der übergebene oRM steht für den RenderManager von SAPUI5. Das über­gebene oControl ist die Custom Control Instanz, aus der die Properties aus­gelesen werden können. Zunächst beginnt man mit einem div, welches am Ende wieder ge­schlossen wird. In das Div selbst werden noch die ControlData und CSS-Classes ge­schrieben, welche über das XML über­geben werden können. Innerhalb der beiden Div-Tags kann nun das eigene HTML ge­schrieben werden, welches das Custom Control mit Leben befüllt. Dies wurde hier in drei eigene Methoden aus­gelagert. Innerhalb der Methoden wurden wiederum einzelne Divs erzeugt, Styles hinzu­gefügt und am Ende an die Haupt-Renderer Funktion zurück über­geben. Um nicht umständliche String-Konkatenationen durch­führen zu müssen, werden in den drei aus­gelagerten Methoden Div-Objekte erzeugt. Diese werden von jQuery in einen HTML-String um­gewandelt und so an die write-Funktion über­geben. Hier ist als Bei­spiel die Funktion zu sehen, welche für den Hinter­grund und die X- und Y-Achsen verant­wortlich sind.

Fazit

In diesem Beitrag wurde anhand zweier aktueller Kundenbeispiele aufgezeigt, dass die Ent­wicklung von Custom Controls nicht mit einem enormen Aufwand ver­bunden sein muss. Oftmals können diese einfach erweitert werden. Auch Neu-Entwicklungen lassen sich mit einfachen HTML und CSS Kennt­nissen schnell und bequem rea­lisieren – und das ohne große Budgets und lang­fristi­gen Ressourcen­ein­satz.

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 lesen
Datenqualität SAP Q-THOR

Datenqualität in SAP BW: Daten ohne Programmierung plausibilisieren

Unsere Standard-Software Q-THOR kann die Datenqualität in SAP BW Systemen...

Mehr lesen

SAP HANA Transport mit MS Azure Pipelines

In diesem Beitrag wird das Transport Tool MS Azure Pipelines...

Mehr lesen