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