Benjamin Salmen
3. Dezember 2020

SAPUI5-Formatter: Eine Anleitung mit Format

SAPUI5

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:

sap.ui.define([], function () {
“use strict”;
return {
// Ihre Methoden
};
});

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:

  1. 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)!
  2. 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!

Unsere FAQs zum Thema SAPUI5 SAP Fiori

FAQ: SAPUI5 SAP Fiori

Die häufigsten Fragen zum Themenkomplex SAPUI5 & SAP Fiori.

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!



Das könnte Sie auch interessieren

Künstliche Intelligenz erhält immer weiter Einzug in unseren Alltag – ob auf privater oder beruflicher Ebene. Auch in der HR-Abteilung soll eine KI die Arbeit deutlich vereinfachen und beschleunigen. Doch wo können Sie künstliche Intelligenz (KI) in HR-Abteilungen tatsächlich einsetzen? […]

weiterlesen

Sie wollen Ihre Fiori-Applikationen als native App auf ein Smartphone oder Tablet bringen? Dank der Mobile Services in der SAP Cloud Plattform geht das mit nur wenigen Klicks! Hier erfahren Sie Schritt für Schritt, wie Sie dafür vorgehen müssen.

weiterlesen

Sie fragen sich, wie Sie eine Datei aus Ihrem Backend in einer Fiori-App dargestellt bekommen? Sie haben vielleicht schon mal etwas von der GET_STREAM Methode gehört, wissen aber nicht, wie Sie diese implementieren müssen? Dann haben wir für Sie hier […]

weiterlesen

Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Angebot anfordern
Preisliste herunterladen
Expert Session
Support