Warum sich für eigene SAPUI5 Custom Controls entscheiden?

Je mehr SAPUI5 App­li­ka­tionen Sie ent­wickeln, desto mehr lernen Sie die Grenzen und Ein­schränkungen kennen. Diese weisen entweder die SAP Fiori Guide­lines oder die Controls selbst auf. Schnell kommt in einem Kunden­projekt die Aussage: „Kann das nicht irgendwie umgesetzt werden?” Hier lautet oftmals die schnelle Antwort, dass dies zu teuer oder nicht möglich sei.

Das muss jedoch nicht sein! Wer sich einmal mit SAPUI5 Custom Controls be­schäftigt, kann schnell einschätzen, welche An­forder­ungen trotz Eigen­ent­wicklung im Hand­um­drehen realisiert werden können.

Nicht einfach los­legen

Als erstes und wichtigstes To-do sollten Sie bei Kunden­projekten die Veran­twort­lichen in­for­mieren, dass diese spezielle An­forder­ung nicht mit Standard­mitteln der SAP zu lösen ist. Da Unter­nehmen häufig Richt­linien bezüglich Eigen­ent­wicklung haben, muss dies vor dem Start der Ent­wick­lung des Custom Controls geklärt werden.

Weiterhin ist es sinnvoll, über die Risiken und Folgen auf­zu­klären. Je nachdem, welche Funkt­io­nali­tät das Custom Control bereit­stellt oder welche be­stehen­den Controls es er­weitert, muss bei einem SAPUI5-Versions Upgrade die Funktions­fähig­keit sicher­ge­stellt werden. Im schlechtes­ten Fall müssen an dem SAPUI5 Custom Control An­passungen vor­ge­nommen werden, damit es mit der neuen SAPUI5 Version identisch aussieht bzw. sich identisch verhält.

Nachdem die For­malitäten geklärt sind, geht es an die eigent­liche Arbeit. Hierbei gilt es, die An­forder­ung an die Eigen­ent­wicklung genau zu ver­stehen. Im Folgenden werden die Grundlagen der Er­stellung von SAPUI5 Custom Controls be­leuchtet. In unserem nächsten Beitrag stellen wir zwei Beispiele aus unseren Kunden­projekten vor.

Wie werden SAPUI5 Custom Controls erstellt

Ein Custom Control ist zunächst sehr ähnlich zu einem Controller auf­gebaut. Im oberen Teil wird defi­niert, welche anderen Controls be­nötigt werden oder welche Files im­portiert werden sollen. Auf Basis eines der über­gebenen Controls wird mittels der „extend“-Funktion eine Er­weiter­ung gebaut.

Sollte sich kein ge­eignetes Control finden, welches er­weitert werden kann, wird das sap.ui.core.Control heran­ge­zogen. Dieses Control stellt die Basis aller anderen Controls dar. Der Name des Custom Controls setzt sich aus dem Namespace der App und einem spe­zifisch­en Namen zusammen. Um nicht durch­einander zu geraten, sollte auch die js-Datei den selben Namen tragen.
Der „extend“-Funktion wird noch ein Objekt über­geben, bei dem sich z.B. neue Properties oder Events defi­nieren lassen. Wichtig bei jedem Custom Control ist, dass die „renderer“-Funktion vo­rhanden ist. Hierbei bietet sich oft die „renderer“-Funktion des zu er­weiterten Controls an. Alternativ muss diese selbst geschrieben werden (beide Arten werden in dem weiteren Blogbeitrag aufgegriffen).

Ver­wen­dung eines SAPUI5 Custom Control

Soll das Custom Control innerhalb des Views ver­wendet werden, muss zunächst wie bei einer zu­sätzlichen SAPUI5-Library der Pfad und ein Kürzel defi­niert werden.
In diesem Bei­spiel gibt es im root-Pfad einen Ordner, der sich „controls“ nennt. Inner­halb dieses Ordners liegt eine MeinCustomControl.js Datei, welche das Custom Control wider­spieg­elt. Inner­halb des XMLs stehen zum einen alle ver­erbten, als auch alle neuen Properties, Events, Aggregations und Associations zur Verfügung. Daher kann es wie ein normales Control der SAPUI5 Library ver­wendet werden.

Hin­zu­fügen weiterer Properties

Benötigt ein Custom Control ein wei­teres Property, wird dies inner­halb des Properties-Objekts defi­niert. Im folgenden Bei­spiel heißt das Property „secondText“ und ist vom Typ ein „string“. Zus­ätzlich lässt sich noch ein defaultValue defi­nie­ren, welcher hier ein leerer String ist.
Für Properties stehen die bekannten SAPUI5-Types zur Verfügung:
  • string
  • boolean
  • int
  • float
  • any
  • object
  • arrays wie z.B. string[]
  • spe­zielle SAPUI5-Types wie z.B. „sap.ui.core.CSSSize” oder andere Con­trols
Der DefaultValue ist kein Pflichtfeld und kann somit auch leer­ge­lassen werden. Das SAPUI5 Frame­work erzeugt auto­ma­tisch aus dem neuen Property Setter und Getter Methoden. Diese können sowohl inner­halb des Custom Controls, als auch inner­halb eines Controllers ver­wendet werden. In unserem Bei­spiel heißen die er­zeug­ten Methoden setSecondText und getSecondText.

Hin­zu­fü­gen weiterer Events

Benötigt ein Custom Control ein wei­teres Event, wird dies inner­halb des Event-Objekts defi­niert. Im fol­gen­den Bei­spiel wurden zwei Events defi­niert: hoverIn und hoverOut, welche auf den Mousecursor rea­gieren sollen.

Neue Events lösen sich aller­dings nicht von alleine aus. Viel­mehr müssen diese aktiv ge­triggert werden. Da in unserem Bei­spiel ein MouseHoverIn und Out ge­wünscht ist, muss das Custom Control auf die Mouse-Events hören.

Das SAPUI5 Frame­work gene­riert auch für Events neue Me­tho­den, welche zum Aus­lösen (Fire) des Events ge­hören. So kann innerhalb des Custom Controls auf die Browser-Mouse­events gehört und das eigene neue Event ausgelöst (gefired) werden.

Fazit

In diesem Beitrag wurde aufgezeigt, dass die Vor­teile von Custom Controls im Ver­gleich zu einer los­ge­lösten jQuery oder JavaScript Kompo­nente enorm sind. SAPUI5 kümmert sich um das Rendern und um die be­ste­hen­den Funk­tio­na­li­tä­ten, ohne dass sich selbst jemand damit be­s­chä­ftigen muss. Lassen sich be­stehen­de SAPUI5 Controls durch Properties oder Events so er­weitern, so dass die An­forder­ungen erfüllt werden, lässt sich das durch wenige Code Zeilen rea­li­sie­ren. Auch komplett neue Controls lassen sich mit einfachen HTML und CSS Kennt­nissen rea­lisieren. Wie das um­ge­setzt wird, erfahren Sie in unserem nächsten Blog­beitrag!

Verfasst von Martika Möller

Beitrag teilen

Share on linkedin
Share on xing
Share on facebook
Share on twitter
Share on whatsapp
Share on email

Weitere spannende Themen aus unserem Newsroom

BIG.Cube Sommerfest 2022

Unser Sommerfest 2022 mit viel Spaß, Action und einem tollen...

Mehr lesen

Rückblick zum DSAG-Partnertag SAP BW/4HANA, Analytics und hybride Landschaften in Präsenz

Diese Themen wurden auf dem DSAG-Partnertagrund um BW/4, Analytics und...

Mehr lesen

Gleich zwei Gründe zum Feiern im Mai

BIG.Cube GmbH feiert 7-jähriges Jubiläum und eröffnet zweiten Standort in...

Mehr lesen