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. 

Prerequisites

1. SAPUI5  UI Development Toolkit for HTML5 should be installed on your machine. To install please visit https://tools.hana.ondemand.com/
2. 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
3. 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:

Conclusion

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 — 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 😈 😀 😎