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

Weitere spannende Themen aus unserem Newsroom

BIG.Cube ist ein Great Place to Work – Bayern und ITK

Die BIG.Cube wurde dieses Jahr von Great Place to Work...

Mehr lesen

Shortcuts für SAP BW in Eclipse

In diesem Blogbeitrag werden fünf einfache Shortcuts erläutert, mit denen...

Mehr lesen

Eisstockschießen mit der BIG.Cube

Die Mitarbeitenden der BIG.Cube waren gemeinsam nach der Arbeit Eisstockschießen....

Mehr lesen

Q-THOR – Zertifi­ziert von der SAP

Die SAP hat unsere Standard­software zur nach­haltigen Steiger­ung und Sicher­stellung der Daten­qualität „Q-THOR“ offiziell für den Ein­satz auf SAP HANA 2.0 über das SAP Integrations­szenario HANA-APP 2.0 zerti­fi­ziert. Mit dieser Zerti­fi­zierung stellt die SAP sicher, dass Lösungen von externen An­bietern sicher in SAP Land­schaften inte­griert werden können. Die Software ist nun offi­ziell im SAP certified solutions directory zu finden. Welche Schritte Q-THOR dabei in dem Zerti­fi­zierungs­pro­zess durch­laufen hat und was die Zerti­fi­zierung für uns und unsere Kunden be­deutet, erfahren Sie im folgenden Blog­beitrag.

Folgenden Zertifizierungs­prozess hat Q-THOR durch­laufen​

Im Zuge des Q-THOR Zertifizierungs­prozesses wurden von der SAP u.a. die nach­folgenden Prozess­schritte an­gefordert und über­prüft:

Vorteile der Zertifizierung für (künftige) Anwender

All diese Schritte wurden erfolg­reich durch­laufen, so dass am Ende des Pro­zesses Q-THOR von der SAP zerti­fiziert wurde. Somit ist sicher­ge­stellt und von der SAP attes­tiert, dass sich Q-THOR problem­los in­stallieren lässt. Zudem stellt die SAP sicher, dass sich die Software reibungs­los in die System­landschaft inte­grieren lässt und Q-THOR ver­lässlich auf der HANA läuft.

Dieser Qualitäts­stempel macht uns stolz und ist neben der Auf­nahme des Pro­duktes in den SAP Store und der Förder­ung vom Bundes­ministerium für Bil­dung und For­schung eine weitere Aus­zeich­nung für die Quali­tät unseres Pro­duktes. So erzeugen wir für unsere Kun­den einen echten Mehr­­wert. Denn durch den Ein­satz von Q-THOR er­möglichen wir den Kunden das Thema Daten­­qua­lität, wel­ches Unter­­nehmen in den kommenden Jahr­­zehn­ten heraus­fordern wird, er­folgreich mana­gen zu können.

Die ge­nerische Archi­tektur von Q-THOR unter­stützt Sie auch auf Non-SAP Land­schaften

Q-THOR überzeugt durch eine voll­ständig gene­­rische Archi­tektur und inte­griert sich einfach in die System- und Daten­land­schaft, ohne diese zu verändern.

Die Land­­schaft kann sowohl SAP-basiert als auch Non-SAP-basiert sein. Dabei kann die Datenbeladung und -integration für Q-THOR auf verschiedene Arten erfolgen, abhängig beispielsweise von Ihrer Systemlandschaft und Ihren Anforderungen an die Verfügbarkeit. 

Sie möchten mehr über Q-THOR erfahren?

Beitrag teilen

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

Success-Story: Datenqualitätsmanagement in der MEAG mit Q-THOR

So stellt die MEAG seit 2016 ein erfolgreiches Datenqualitätsmanagement mit...

Mehr lesen

Rückblick 4. Jahres­forum Stamm­daten­manage­ment

Das 4. Jahresforum Stamm­daten­management der imh in Wien bot interessante Einblicke in den aktuellen Stand der Daten­infra­struktur und der Daten-Prozesse von Unter­nehmen aus verschie­denen Branchen. Von Data-Governance über Data Lake und Data Mesh bis hin zum Story­telling in der Daten­analyse wurde in zahlreichen Vorträgen über viele spannende Themen diskutiert.

Daten­qualität als eines der wich­tigen Themen

Die Daten­qualität ist dabei eine der großen und wichtigen Klammern über alle genannten Themen. Das wurde vor allem daran deutlich, dass fast kein Vortrag und keine Diskussion daran vorbei­kamen, die Wichtig­keit der Daten­qualität zu erläutern. Die Meinungen der Vortra­genden und Teilneh­menden gingen lediglich in einem Punkt stark ausei­nander: woher muss der Anstoß für eine Stei­gerung der Daten­qualität kommen? Während die einen zu einem Top-Down-Ansatz rieten, bei dem der Anstoß aus dem Manage­ment kommen müsse, setzten die anderen auf einen Bottom-Up-Ansatz mit dem Anstoß aus dem Fachbe­reich und von den Anwendern. Unser Produkt Q-THOR gliederte sich dabei optimal in den Vortrag “Die Daten­qualität als Erfolgs­faktor in Zeiten explodierender Datenmengen” ein.

Data-Driven als neues Ziel

Die zwei Tage in Wien machten deutlich: Unter­nehmen werden immer von ihren Daten gesteuert und müssen Arbeits­methoden, Prozesse und Infra­struk­turen darauf ausrichten. Dabei prangern Unter­nehmen immer wieder an, dass die Gesetz­gebung in diesem Bereich hinter der schnellen Entwick­lung hinter­herhinke. All das sorgt für große Heraus­forde­rungen – in den IT-Abteilungen und in den daten­verarbei­tenden Fach­bereichen. Eines wurde in Wien aber ebenso klar: ein Unter­nehmen, das von seinen Daten gesteuert wird, kann nur erfolgreich kann nur dann erfolgreich sein, wenn seine Daten korrekt sind. Die Daten­qualität lässt sich also sehr direkt mit dem Unter­nehmens­erfolg verbinden.

Eindrücke aus Wien

Fotocredit: © imh

Jetzt Kontakt aufnehmen

Beitrag teilen

Weitere spannende Themen aus unserem Newsroom

BIG.Cube ist ein Great Place to Work – Bayern und ITK

Die BIG.Cube wurde dieses Jahr von Great Place to Work...

Mehr lesen

Shortcuts für SAP BW in Eclipse

In diesem Blogbeitrag werden fünf einfache Shortcuts erläutert, mit denen...

Mehr lesen

Eisstockschießen mit der BIG.Cube

Die Mitarbeitenden der BIG.Cube waren gemeinsam nach der Arbeit Eisstockschießen....

Mehr lesen