Auto Language Conversion : Google Translate + UI5

[pinakipatra]

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. :sad:

What is the solution?

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

    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 :razz:

Results

German

Russian

Hindi

French

Hope the post is useful .

Thanks