Skip to Content
Author's profile photo Pinaki Patra

Auto Language Conversion : Google Translate + UI5

Its really awesome when it comes to the possibilities that SAP UI5 offers.

SAP UI5 has the capability to provide translatable texts SAPUI5 SDK – Demo Kit .

But the problem is you have to maintain the property/resource file for each and every language along with the text.

Although it is recommended from the quality & stability point of view , it includes a lot of manual effort. 🙁

What is the solution?

     Nowadays  you have google website translator which helps in translating your website without any effort. 😈

    Website Translator

How it Works ?

     Google translator detects each and every div(inner HTML/ text) and send a post query which fetches the translated text and applies to the respective div.

     Since UI5 internally renders all the controls as HTML Div s , it is supposed to work with UI5 as well.

How do i implement ?


Step 1     :  Call the google translate JS file and initiate (in side HTML Header)


<script type="text/javascript" src="//"></script>
<script type="text/javascript">
        var userLang = navigator.language || navigator.userLanguage || navigator.languages;
        if (userLang.substr(0,2) != "en"){
          function googleTranslateElementInit() {
            new google.translate.TranslateElement({pageLanguage: 'en', layout:
            google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
        else {


Step 2   :        Now a default header will be applied by google, now to hide it insert the following css code snippet


<style type="text/css">{ display: none !important;}</style>
<style type="text/css">body {position: static !important; top:0px !important;}</style>

Step 3 :       Next we have to trigger the post based on the browser language.

                    To detect browser language you can use sap.ui.getCore().getConfiguration().getLanguage()

                    I have placed the function under the onAfterRendering life-cycle event which will be triggered after a delay of 3 second.

        function changeLanguage() {
            var jObj = $('.goog-te-combo');
             var db = jObj.get(0);
             var lang = sap.ui.getCore().getConfiguration().getLanguage()
             var evt = document.createEvent("HTMLEvents");
             evt.initEvent('change', true, true );
//             jObj.dispatchEvent(evt);
         setTimeout(changeLanguage, 3000)

Get Set Go >>>

Now everything is done and the ui5 app will detect the browser language and change the text accordingly.

How do i test it ?

     1. You can go to the browser and change the language settings.

     2. After the URI you can add a parameter ?sap-ui-language=de


Amazingly it gives a pretty accurate results for over 100+ languages , but sometimes the wordings may not have the proper context meaning 😛






Hope the post is useful .


Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Arpita Nath
      Arpita Nath

      I am not able to see Google translate Header 🙁