UI5 Text Translation with Google Website Translator Gadget.
Maintaining different translation files for supporting different languages is always an overhead for me. So for SAP UI5 application it strikes my mind provide multilingual support using Google Website Translator Gadget.
What we are building?
We are building a custom control for SAP UI5 application which uses google website translator gadget, and which can translate the texts in different languages on the fly without any need to maintain different translation files for different languages.
- SAPUI5 UI Development Toolkit for HTML5 should be installed on your machine. To install please visit https://tools.hana.ondemand.com/
- Basic Idea about creating and using custom control in SAP UI5. To know more about custom controls in UI5 please visit How to create custom control from scratch
- Very basic idea about Google Website Translator Gadget.
Writing the Custom Control
In the following custom control named Google Translator, I have defined a property name “pageLanguage” which tells the control what the default language of your application.
In the render function of the custom control I’m rendering the code provided by Google Website Translator Gadget. Not much of Rocket Science 😐 😛 😉 😎
Consuming Google Translator Custom Control
To use the google translator custom control I’m calling the custom control from my XML view, where I’m setting the custom control at header content of the page. While calling the custom control I’m passing ‘en’ (code for English) as the page Language.
Running it together
I run the complete above UI5 application on my local machine. Initially the application rendered like this:
we can see the “Select Language” drop-down on the right top of the screen. On selecting the target translation language from the drop-down:
On selecting, Hindi as the target language, Some magic occurs and the page looks like this:
We have successfully created, consumed and ran a UI5 custom control using Google Website Translator Gadget which supports multi-lingual application on the fly without maintaining different translation files for supporting different languages.
We can also achieve this by using Translate API – Translate API &mdash; Google Cloud Platform but since it was a paid service I didn’t played with it 😆
I’ll share the complete code for the above application soon. Till then stay tuned and as always feedback and comments are always welcome 😈 😀 😎
Is it really work. We have a site Best Gaming laptop and we want that it translateslet to any languge. Is it possible that ui5 can do this?
Yes, it really works. There is nothing special about UI5 which make this work. Google Website Translator Gadget is the real hero which perform all the translation work. This blog describes how to consume Google Website Translator Gadget in UI5 by wrapping it as a custom UI5 control. Hope it helps 🙂
Thanks and Regards