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="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></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 {
          document.getElementById("google_translate_element").style.display="none";
          }
</script>

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">iframe.goog-te-banner-frame{ 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.

onAfterRendering:function(){
        function changeLanguage() {
            var jObj = $('.goog-te-combo');
             var db = jObj.get(0);
             var lang = sap.ui.getCore().getConfiguration().getLanguage()
             jObj.val(lang);
             var evt = document.createEvent("HTMLEvents");
             evt.initEvent('change', true, true );
//             jObj.dispatchEvent(evt);
             db.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 😛

Results

German

Russian

Hindi

French

Hope the post is useful .

Thanks