Hi All,
Today I am going to show you quick way by using small piece of code you can turn you complete page in the language you want for end user. There is no need of any Translation configuration or anything...etc. I am going to do this using simply google translation apis. Lets go together:-
1) Identify elements on your page which you want to translate. For example label, h2, div, p tags etc.
<label>First Name<label>
2) Use below code to translate all "Label" on your page. The below code is converting english to french:-
<script src="http://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
allLabels = document.getElementById("maindiv").getElementsByTagName("label");
for(var i = 0; i < allLabels.length; i++){
translate(allLabels[i]);
}
}
function translate(lbl){
var text = lbl.innerHTML;
google.language.translate(text, "en", "fr", function(result) {
if (!result.error) {
lbl.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);
</script>
3) Now make one Dropdown with the language list you want to show user to select and convert:-
<select onChange="changelanguage()" id="languagelist">
<option value="en">English</option>
<option value="de">deutsch</option>
<option value="pt">português</option>
<option value="fr">français</option>
<option value="ja">日本語</option>
<option value="ar">عَرَبيْ</option>
<option value="it">italiano</option>
<option value="ru">pусский</option>
<option value="po">polski</option>
<option value="zh-CN">中文</option>
<option value="es">español</option>
<option value="ko">한국어</option>
<option value="nl">nederlands</option>
<option value="hi">हिन्दी </option>
<option value="el">Ελληνική</option>
<option value="ro">română</option>
</select>
4) JS method to trigger the this:-
<script>
function changelanguage(){
var language = document.getElementById("languagelist").value;
window.location.href = "/apex/Translator?language=" + language;
}
var lang = "{!$CurrentPage.parameters.language}";
var language = document.getElementById("languagelist");
language.value = lang;
</script>
5) Conclusion and Full Example:-
Suppose you want to make a customer Contact (Standard Object) form, see the below code of Visual Force Page and screenshot for example:-
<!--
Name : Translator
Author : Aslam Bari
Last Modified : 02-March-2010
Version : 1.0
Description :
-->
<apex:page standardController="Contact">
<!-- Transalator Code -->
<script src="http://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
allLabels = document.getElementById("maindiv").getElementsByTagName("label");
for(var i = 0; i < allLabels.length; i++){
translate(allLabels[i]);
}
allH2 = document.getElementById("maindiv").getElementsByTagName("h2");
for(var i = 0; i < allH2.length; i++){
translate(allH2[i]);
}
allH1 = document.getElementById("maindiv").getElementsByTagName("h1");
for(var i = 0; i < allH1.length; i++){
translate(allH1[i]);
}
}
function translate(lbl){
var text = lbl.innerHTML;
google.language.translate(text, "en", "{!$CurrentPage.parameters.language}", function(result) {
if (!result.error) {
lbl.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);
</script>
<!-- Transalator Code -->
<apex:form>
<div style="width:90%;text-align:left" id="maindiv">
<apex:sectionHeader title="Contact Form" subtitle="Multilingual Contact Form"/>
<label>Please select a language for translation the page: </label>
<select onChange="changelanguage()" id="languagelist">
<option value="en">English</option>
<option value="de">deutsch</option>
<option value="pt">português</option>
<option value="fr">français</option>
<option value="ja">日本語</option>
<option value="ar">عَرَبيْ</option>
<option value="it">italiano</option>
<option value="ru">pусский</option>
<option value="po">polski</option>
<option value="zh-CN">中文</option>
<option value="es">español</option>
<option value="ko">한국어</option>
<option value="nl">nederlands</option>
<option value="hi">हिन्दी </option>
<option value="el">Ελληνική</option>
<option value="ro">română</option>
</select>
</select><br/>
<label>This is a demo page to show the power of Google Transation API with Force.com :-</label>
<apex:pageBlock title="Please fill the form">
<apex:pageBlockSection>
<apex:inputField value="{!Contact.FirstName}"/>
<apex:inputField value="{!Contact.LastName}"/>
<apex:inputField value="{!Contact.Email}"/>
<apex:inputField value="{!Contact.Phone}"/>
<apex:inputField value="{!Contact.Title}"/>
<apex:inputField value="{!Contact.Birthdate}"/>
<apex:inputField value="{!Contact.Address__c}"/>
<apex:inputField value="{!Contact.Description}"/>
</apex:pageBlockSection>
</apex:pageblock>
</div>
</apex:form>
<script>
function changelanguage(){
var language = document.getElementById("languagelist").value;
window.location.href = "/apex/Translator?language=" + language;
}
var lang = "{!$CurrentPage.parameters.language}";
var language = document.getElementById("languagelist");
language.value = lang;
</script>
</apex:page>
Screen Shots:-
Form in Hindi---
Form in Arabic---
And many more....
Isn't it a quick way to do interesting thing :)
Aslam Bari
8 comments:
Hi Aslam ,
Its a very interesting and new thing .Really good for knowledge.
Reena
Hi Aslam bayya!
Thanks for sharing this good example.
Hello sir,
Interesting, good customization tool !
excellent work!!
Excellent *****
Thank u Boss,great thought......thanks for sharing u r knowledge......
i tried it but it is not working
when i chose a value from the dropdown list it is not showing contents in that proper lang.
Its not showing content for selected lang.
Please suggest.
Post a Comment