Hassle-Free Translations in JavaScript with OTRS 6

Marc Bonsels03. Apr 2017 | Miscellaneous

Did you ever have to use translations in JavaScript when developing something for OTRS? Then you probably added your JavaScript to the .tt/.dtl template of the frontend you wanted to customize. Then you’d usually fill a variable with the translation, probably like this:

var MyTranslatedText = '[% Translate("This is my text") | JSON %]';

Besides the fact that something like this looks somehow wrong, it would only work as long as you needed the string in only one place. Imagine you wanted to customize one of OTRS’s JavaScript libraries (like Core.Agent.js). In that case, you would have to add a new custom-named string to the Core.Config.AddConfig()-call in FooterJS.tt:

Core.Config.AddConfig({
   ....,
   MyTranslatedText:'[% Translate("This is my text") | JSON %]',
   ....,
});

This looks wrong, too, doesn’t it? Both ways have some serious limitations and especially the second way is error-prone because someone else could easily overwrite your string (even without recognizing it) because there is no name-spacing.

That’s why we also overhauled this certain area for OTRS 6. We added a new mechanism which is capable of extracting translatable strings from not only OTRS’s own libraries (Core.Something.js) but also from third-party libraries (which is for example needed for the d3.js chart type libraries we customized for OTRS). You can now easily translate strings with this call:

Core.Language.Translate("This is my text");

That’s it. Of course, the Translate method is also capable of using placeholders:

Core.Language.Translate("This is my text which has %s characters", SomeVariable);

All strings enclosed by a Translate call will automatically be added to the translation cache and will be made available for Translation on Transifex. Strings found in JavaScript will be added to the $Self->{JavaScriptStrings} hash in each language file (e.g. de.pm).

Learn more about Core.Language in the OTRS 6 API documentation.

• 1