Hassle-Free Translations in JavaScript with OTRS 6

Marc Bonsels03. Apr 2017 | Miscellaneous


The practical examples presented in our technical blog (blog.otrs.com) and now in the expert category in our FAQ blog section serve as a source of ideas and documentation to show what is theoretically possible with OTRS in concrete scenarios or sometimes even for more exotic configurations. All configurations presented here were developed under laboratory conditions as a proof of concept. 

We can only guarantee testing and implementation of these concepts to be error-free and productive if implemented in a workshop with one of our OTRS consultants. Without this, the responsibility lies with the customer himself. Please note that configurations from older OTRS versions may not work in the newer ones.

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:

   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.

Rolf Schmidt at 28.04.2017, 14:59

Looks promising :-)

Your email address will not be published. Required fields are marked *