UI5 Tooling Custom Task using SAP Translation Hub ...

WRoeckelein · ‎01-21-2021

Motivation

When developing an UI5 application you can utilize resource bundles of property files for internationalization (short i18n). The developers externalize all texts which need to be translated in a default properties file (named i18n.properties) using the default language (usually English). At the end of the development process this file is given to the translators which deliver per language a translated version of this file. These files are deployed together with the application and the user of application enjoys the app in his native language (which the developers might not even be able to read…).

So far, so good. But there is room for improvement in this process!

First with agile development being the norm nowadays, a waterfall model of first developing and then translating seems to be outdated. Agile Development aims to deliver an improvement to users at the end of each sprint. And this should of course not only be the users understanding the default language... So we need to also have agile translation in parallel to the agile development.

Second with widespread usage of machine translation (think of Google Translate) and with tons of texts already translated in our SAP ERP systems since decades, you could make the job of the translators easier and quicker. SAP is offering the SAP Translation Hub for this. It taps on the huge amount of already translated texts available inside SAP (MLTR – multi language text repository) and uses a machine translation (MT) algorithm tailored for short text translation. It also offers a nice UI for the translators for the manual translations remaining.

Translation Hub is offered as a free limited trial and for CPEA and subscription pricing (also for SAP Partners).

For more information on Translation Hub please refer to the documentation.

Translation Hub offers a direct integration with the source code management system git. This makes it possible to automate the process of using translation hub. However there could be several problems with this approach:

One might not be comfortable with an outside cloud service having write access to the corporate git repository

The git commits by the translation hub might confuse the developers

UI5 applications might have i18n.properties files in several directories (a direct git integration project of the Translation Hub does only deal with one properties file per registry)

A UI5 application seldom comes on its own. The reality is often a set of related applications, which should ideally be treated together by the translators to ensure consistency

Using a file project variant instead of the git project variant in the Translation Hub involves a lot of manual tasks

Introduction

In order to offer a different approach overcoming these problems, I have developed the UI5 Tooling Custom Task ui5-task-translationhub and offer it as open source on github.

UI5 Tooling is an extendable open source toolchain used to test, build and deploy UI5 applications. At the start, mid or end of the build task chain one can add deployment tasks, SAP offers for example https://www.npmjs.com/package/@sap/ux-ui5-tooling#user-content-deployment-to-abap for deployment to ABAP onpremise and cloud systems.

ui5-task-translationhub is intended to “mix in” the translations from the SAP Translation Hub during the build before the deployment. By this the developers neither need to bother with translation nor they see the translations in git commits, but translations are automated added in the build process (and only there) to be deployed together with the application.

The task accesses the API of the translation hub (thanks to SAP for offering an API!) for a Files Project for “JAVA properties files” (as this style is used by UI5 applications). A Files Project has the advantage that it can contain more than one properties file. You need to create the project beforehand with the Translation Hub UI and configure it according to your needs.

Usage

Follow the instructions from the README.md and add the task to the package.json and ui5-deploy.yaml (the latter can be generated with the npx fiori add deploy-config command).

For example:

builder:
  customTasks:
    - name: ui5-task-translationhub
      beforeTask: escapeNonAsciiCharacters
      configuration:
        hostName: sapXXXXXXXXX-YYYYYYYYY.hana
        projectID: 0000

When you now start the deployment, as the first task (as escapeNonAsciiCharacters is otherwise the first task) ui5-task-translationhub is run.

What happens during the task ui5-task-translationhub?

First the workspace of the build task chain is searched for i18n.properties files.

Each found file is uploaded the translation hub project with the virtual path of the file in the workspace (this makes the resulting path/file unique even with several files in one application and with files from different applications). If the file already exists it is updated while retaining all automated and manual translations already done.

For each file the translation process (using MLTR, MT and manual translations already maintained in the Translation Hub UI) is started and after finish of this the translations are downloaded and written to the workspace of the build task chain (not the actual developers workspace!).

So when the deployment task is run at the end of the chain the translated files are also deployed.

Additional Options

Translation Hub provides eg for German an i18n_de_DE.properties file. While this translations might be also helpful for German speaking people in other countries than Germany like Austria, Switzerland, Belgium, Namibia etc. (despite not containing country specific words like the ‘Austriazismen’), for those people UI5 would fallback e.g. from de_AT to the overall fallback from i18n.properties (which is usually English).

With the addition of

        duplicate:
          de_DE: de_CH,de_AT

the i18n_de_DE.properties is also copied to i18n_de_CH.properties and i18n_de_AT.properties files.

Alternatively with the addition of

        duplicate:
          de_DE: de

the i18n_de_DE.properties is also copied as i18n_de.properties . Thus for the de_AT user with no i18n_de_AT.properties file being available UI5 triggers the fallback to the now available i18n_de.properties file.

If your internet connection to the cloud landscape where your Translation Hub Tenant runs is not so good you might need to add the timeout and timeoutUpDown options with larger values than the default (which are 1000 and 30000 milliseconds respectively).

You could also add the ui5-task-translationhub to ui5.yaml or copy ui5.yaml to e.g. ui5-translate.yaml and add it there (and add a scripts entry in the package.json file). With this you can trigger the translation process before deployment and thus provide the translators with the texts waiting to be translated.

Conclusion

I hope you find this task useful! If you find bugs, please use github for reporting.

The development of this task would not have happened without the great open sourced and extensible UI5 tooling, thank you all UI5 Tooling developers inside and outside of SAP (cf eg https://github.com/SAP/ui5-builder/graphs/contributors). Especially I would like to thank @pmuessig for providing us with his ui5-ecosystem-showcase now available at https://github.com/ui5-community/ui5-ecosystem-showcase which gave me a lot of inspiration and solutions during the development of ui5-task-translationhub.

And of course I would like thank SAP for opening their MLTR treasure chest and offering the Translation Hub Service. Special Thanks to @beapasch and her team for bringing Translation Hub to us!

Addendum

I have updated the Custom Task to UI5 Tooling 3.0 (and also to current versions of depedencies). Please use version 1.0.3 (can be achieved with "DerGuteWolf/ui5-task-translationhub#semver:^1.0.3")