SAPUI5-Formatter: Eine Anleitung mit Format
Sie fragen sich, wie Sie in Ihrer SAPUI5-App die im XML gebundenen Daten hübsch formatieren können? In diesem Beitrag erhalten Sie die Antwort darauf, wie Sie Ihre Daten in Reih und Glied stehen lassen!
Der Formatter
Was ist nun so ein sagenumwogender Formatter? Das ist tatsächlich ziemlich simpel erklärt: Ein Formatter ist nichts anderes als eine Datei, die mehrere Javascript-Methoden enthält. Diese Methoden dienen zum Formatieren von Daten. Und das war es eigentlich schon mit der ganzen Magie. Das Tolle an der Sache: Wir können den Formatter in unser XML mittels Aggregation-Binding einbinden und so unsere eigentlich unformatierten Daten doch noch etwas „geradebiegen“.
Anlegen des Formatters
Den Formatter können Sie eigentlich an einer beliebigen Stelle in Ihrem Projekt anlegen. Als Best Practice hat sich dafür jedoch der „models“-Ordner im „webapp“-Ordner herauskristallisiert, da es hierbei ja streng genommen um das M wie Model aus dem MVC-Pattern geht. Hier können Sie mit Rechtsklick auf den Ordner -> New -> File eine neue Datei anlegen. Diese nennen wir formatter.js, wie in den folgenden Bildern dargestellt:
Im Formatter brauchen wir nun noch die typische SAPUI5-Controllerhülle. Also den Teil mit „sap.ui.define(…“ usw.
Formatter-Vorlage
Ich liefere Ihnen mal einen leeren Formatter zum Rauskopieren direkt mit:
Anschließend können wir wie im Controller unsere Methoden im Block nach dem return definieren. Hier stehen uns nun sozusagen alle Möglichkeiten offen. Eine typische Formatter-Methode hat mindestens einen Eingabeparameter (der gebundene Wert aus dem XML) und einen return-Wert (der Wert, der anschließend auf der View ausgegeben wird).
So könnte beispielsweise eine unserer Methoden aussehen:
Mit dieser Methode können wir führende Nullen aus einer Personalnummer löschen.
Einbinden des Formatters
Zunächst müssen wir einen Zwischenschritt erledigen, um den Formatter im XML aufrufen zu können. Wir müssen den Formatter zunächst im Controller der View einbinden. Dies geschieht folgendermaßen:
- Als erstes müssen wir im Controller die Referenz auf die formatter.js Datei hinterlegen. Den Pfad zur formatter.js Datei können Sie übrigens sehr leicht anhand des im Controller definierten Pfades ablesen: Einfach den Teil ab /controller/ durch /model/formatter (ohne .js ersetzen)!
- Anschließend legen wir noch ein Objekt formatter vom Typ formatter an. Dabei wird das formatter links vom Doppelpunkt das Objekt, auf das wir uns in der XML-View beziehen wollen. Das formatter rechts vom Doppelpunkt referenziert auf das eingebundene formatter vier Zeilen darüber im Aufruf function(Controller,…, formatter).
Das Einbinden des Formatters im XML ist recht simpel. Es geschieht über folgenden Aufruf:
Anstatt hier nur das Property zu binden, wird hier auch noch der Hinweis auf den Formatter mitgegeben. Das Property, das sonst in den geschweiften Klammern gestanden hätte, finden wir nun im Attribut path. Der Verweis auf die Formatter Methode folgt hinter formatter. Wichtig ist hierbei, nicht zu vergessen, dass innerhalb eines XML-Attributes Anführungszeichen (“) mit einfachen Hochkomatta (‘) ersetzt werden.
Aber wie genau funktioniert jetzt der Aufruf des Formatters? Wichtig ist an dieser Stelle, zu verstehen, dass der Punkt im formatter-Attribut ein Verweis auf den Controller ist. Nach diesem Punkt hätten wir also theoretisch auch direkt eine Controller-Methode aufrufen können – oder ein anderes Objekt. Der Vorteil darin, ein Formatter-Objekt zu nutzen, liegt natürlich in der Übersichtlichkeit und der Wiederverwendbarkeit. Daher hat sich das Vorgehen als Best Practice etabliert.
Also geben wir mit dem ersten Punkt den Verweis auf den Controller, dann auf das vorher definierte formatter-Objekt aus dem Controller. Anschließend rufen wir die convertPernr-Methode in diesem Formatter auf. So weit, so einfach!
Profi-Tipp: Formatter mit mehreren Parametern
Was ist jetzt aber, wenn Sie einen Wert aus mehreren Backend-Werten zusammensetzen oder ermitteln müssen? Nichts leichter als das! Sie können in der Formatter-Methode selbstverständlich mehrere Eingabeparameter definieren. Aber wie kommen die Daten nun in diese Methode? Dazu gibt es im SAPUI5-Framework folgendes Binding:
Anstatt im path-Attribut ein Feld zu hinterlegen, wird hier nun ein ganzes Array an Feldern im Attribut parts hinterlegt. Hierbei gibt es keine Obergrenze: Es kann eine beliebige Anzahl an Parametern übergeben werden, solange nicht mehr als in der Formatter-Funktion definiert sind.
Randnotiz: Nutzen des Formatters im Controller
Selbstverständlich können Sie Ihre Formatter Funktionen auch im Controller nutzen. Dies geht einfach mittels „this.formatter.convertPernr(sConvertThis)“.
Tadaa!
Und das war es schon. In wenigen einfachen Schritten haben Sie Ihre Daten sauber und wiederverwendbar formatiert. Den Formatter können Sie auf allen Views oder Controllern einbinden und nutzen. Nie wieder umständliches Formatieren im Controller oder unsaubere Bindings – dank dem Formatter gehört das jetzt der Vergangenheit an.
Haben Sie noch Fragen zum Formatter oder anderen Fiori-Themen, bei denen ich Ihnen helfen kann? Schreiben Sie mir gern. Ich freue mich auf Ihre Fragen!
Testdaten on request für SAP HCM
Unsere Lösung bietet Ihnen über ein Testdatenkiosk die Möglichkeit synthetische "Testdaten on request" für das SAP HCM zu erstellen.
