Fiori für ABAP - Übersetzung (i18n)
Wie sieht es eigentlich mit Mehrsprachigkeit bei unserer Fiori App aus? Bisher hatten wir uns nicht um Texte und Übersetzungen gekümmert, daher schauen wir uns diesen Punkt im Detail an.
Inhaltsverzeichnis
In diesem Artikel schauen wir uns das Thema Übersetzung für unsere Fiori Anwendung an und prüfen, wo wir überall etwas tun müssen und wie die Struktur aussieht.
Einleitung
Bisher hatten wir unsere Sales App vor allem mit Komponenten erweitert und sind nicht weiter auf das Thema Übersetzbarkeit oder Texte eingegangen. Dabei haben wir für die Custom Section, für die verschiedenen Elemente und Einstellungen bereits Texte hinterlegt. Diese sind aber aktuell nicht übersetzbar. Daher schauen wir uns das Thema Übersetzbarkeit von Fiori-Elements-Anwendungen noch einmal im Detail an und ziehen die verschiedenen Texte in unserer Anwendung gerade.
Grundlage
Übersetzungen werden in Fiori als sogenannte i18n-Files abgelegt. Dafür gibt es im webapp-Ordner eine eigene Struktur namens i18n. Darunter liegt ein Default-File, welches bereits beim Generieren angelegt wurde und die ersten Texte enthält. Die Abkürzung steht für Internationalization. Dabei wird das I und das n genommen, und die 18 Buchstaben, die dazwischenstehen, werden einfach durch die Zahl 18 abgekürzt. Daraus ergibt sich dann fir Abkürzung "i18n".
Wie wir bereits in der Einführung für Fiori Elements geschrieben haben, wollen wir uns vor allem auf die Basics im Business Application Studio beschränken. Dabei verwenden wir möglichst wenige Elemente und machen möglichst wenige Erweiterungen im Fiori-Projekt. Das Ganze gilt auch für die Übersetzungen. Im Grunde kommen unsere Texte für Spalten, Felder und Aktionen aus unserem Backend, dort sind auch die entsprechenden Nachrichten und Meldungen definiert. Da wir nun aber Custom Sections angelegt haben und eigene Buttons in unserer Anwendung verwenden, müssen diese auch hier lokal übersetzt werden, da die Texte nicht aus dem Backend kommen können.
Textelemement
Werfen wir also erst einmal einen Blick auf die Definition der Elemente: Wie kannst du diese erkennen und dann auch wirklich verwenden?
Definition
Bereits bei der Anlage der Anwendung wurden für den Titel und die Beschreibung entsprechende Textsymbole definiert. Diese erkennst du an den doppelten geschweiften Klammern und dem Key, der sich dazwischen befindet. Hier sehen wir als Beispiel einmal einen Ausschnitt aus der manifest.json und dort die beiden Platzhalter, die für den App-Title und die App-Description definiert wurden:
Texte
Werfen wir dann einen Blick in die i18n-Datei, finden wir diese beiden Platzhalter ebenfalls definiert. Der eigentliche Text wird dann hinter dem Gleichheitszeichen definiert und so können auch später Übersetzungen durchgeführt werden. Wir verwenden also in unserer Anwendung vor allem die Platzhalter und erkennen die Texte daran, dass entweder ein i18n aus dem Sprachmodell in der Nähe steht oder dass wir hier die doppelten geschweiften Klammern haben.
Platzhalter
Nun können wir die Übersetzung an verschiedenen Stellen durchführen. Hier gibt es verschiedene Möglichkeiten entweder eine manuelle Übersetzung oder in manchen Fällen sogar Eine entsprechende Möglichkeit per Knopfdruck. Die Sprachdatei Anzupassen und den Platzhalter auszulagern.
Page Map
Die erste Möglichkeit, die wir uns anschauen wollen, ist über die Page Map. Dabei können wir die verschiedenen Elemente, die wir angelegt haben, heraussuchen und finden im Seitenmenü eine Option für die Übersetzung. Hier in diesem Fall haben wir unsere Custom Action ausgewählt und finden dann auf der Seite den Text. Dort findest du den Button mit der Weltkugel, um darauf zu klicken.
Nach dem Klick auf den Button erhältst du ein kleines Pop-up, wo du gefragt wirst, ob du den Text auslagern möchtest. Hier kannst du die Aktion abbrechen oder bestätigen. Nach Bestätigung wird der Text verschoben und ein Alias angelegt.
Nach der Umsetzung des Textes findest du nun eine Referenz auf das i18n-Modell und den Platzhalter im Text. Ebenfalls hat sich das Icon für die Kugel im Hintergrund geändert. Wenn du noch einmal darauf klicken solltest, landest du direkt beim Text im i18n-File und kannst diesen ändern. Eine praktische Methode für die Navigation.
Diese Änderungen wollen wir nun auch für die Custom Sections durchführen und die Überschriften in die i18n-Datei auslagern. Damit hätten wir alle Punkte der Page Map abgearbeitet und Übersetzungen angelegt.
Manifest
Aktuell haben wir noch einen offenen Punkt in der manifest.json: Hier wurden über die Einstellungen in den Views und Controls, aber auch in den Erweiterungen Texte angelegt, die wir noch über das i18n-File ändern möchten. Allerdings müssen wir hier die Texte manuell ändern und entsprechende Platzhalter einfügen, wobei wir jetzt die Möglichkeit haben, auch sehr sprechende Platzhalter zu verwenden, um diese später wiederfinden zu können.
Hierfür tauschen wir die Texte durch Platzhalter aus und fügen diese manuell in die i18n-Datei ein. Zum Abschluss sollte die Übersetzung wie unten aussehen: Wir verwenden hier jeweils das Sprachmodell und verweisen auf den Platzhalter darin. Damit sind auch die letzten Texte noch in der Datei verfügbar, und wir haben eine zentrale Stelle, um Übersetzungen für unsere Anwendung durchführen zu können.
Übersetzung
Aktuell unterstützen wir nur eine Sprache in unserer Anwendung. Diese ist in der i18n-Datei abgelegt. Grundsätzlich ist dies ein gutes Vorgehen, um eine Fallback-Sprache zu haben, wenn zum Beispiel eine Sprache nicht verfügbar ist. Um nun eine weitere Sprache anlegen zu können, müssen wir die Datei kopieren und ein entsprechendes Sprachkürzel dahinter ergänzen. Zum Beispiel wollen wir nun die Datei ins Deutsche übersetzen, dann müssen wir die "i18n_de.properties" anlegen und dann die Datei übersetzen. Dabei kannst du mit Copy&Paste arbeiten, um dann direkt mit der Übersetzung zu starten.
Damit unterstützt unsere Anwendung nun zumindest Deutsch als zusätzliche Sprache und Englisch als Fallback-File, also die i18n-Datei als Standarddatei. Der Fallback ist immer wichtig, wenn zum Beispiel User sich jetzt auf Französisch oder Italienisch anmelden, damit sie auch einen Text erhalten und die Attribute nicht leer sind.
Wahrscheinlich hast du dich noch gefragt, was die Kommentare über den Text-Platzhaltern (#XTIT) eigentlich bedeuten. Das sind Annotationen, die für die Übersetzung später relevant sind. Sie sind nicht für die Anwendung gedacht, sondern eigentlich nur für denjenigen, der den Text übersetzen muss. Hier gibt es verschiedene Kürzel, die du verwenden kannst, sowie eine Beschreibung, die dahinter definiert wurde. Grundsätzlich ist das kein Muss, wenn du eine i18n-Datei erzeugst, solange du eine sprechende ID, beziehungsweise Identifikation, dafür verwendest.
Vollständiges Beispiel
Die gespeicherten Ressourcen zu unserer Anwendung findest du in unserem GitHub Repository. Damit kannst du in Zukunft alle Anpassungen an der Fiori App mit nachvollziehen oder die Ressourcen für ein Deployment nutzen. Die aktuellen Änderungen findest du in diesem Commit wieder.
Fazit
Wenn du später deine Anwendung zur Verfügung stellen möchtest, solltest du auf jeden Fall daran denken, dass es auch in der Fiori-Anwendung Übersetzungen gibt, die mit deployed werden müssen. Übersetzungen sind hier genauso ein wichtiges Thema wie im ABAP-Kontext, um die Mehrsprachigkeit deiner Anwendung sicherzustellen und dem Endanwender eine gute App zur Verfügung zu stellen.
