Skip to Content
Technical Articles
Author's profile photo Ashish Anand

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. 



  1. SAPUI5  UI Development Toolkit for HTML5 should be installed on your machine. To install please visit
  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 😐 😛 😉 😎

8-20-2015 4-55-17 PM.png

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.

8-20-2015 5-06-52 PM.png

Running it together

I run the complete above UI5 application on my local machine. Initially the application rendered like this:

8-20-2015 5-09-38 PM.png

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:

8-20-2015 5-13-06 PM.png

On selecting, Hindi as the target language, Some magic occurs and the page looks like this:

8-20-2015 5-15-28 PM.png


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

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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?

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author


      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