Introduction
There are multiple ways to implement multilingual sites in SharePoint, like MUI, Variation, Google Translate. Here, I will explain the basic concept of these 3 options that can be used which suites our requirements.
1. Multilingual User Interface(MUI)
This option creates a site in default language that is selected while creating a Site. For example, if the Chinese language is selected when the site was created, the site user interface will appear in Chinese. We need to add different language pack and configure site for multiple languages.
Limitations:
It only affects the site administration pages and OOTB SharePoint navigation, welcome message, column headers etc. But it doesn’t support user-created content, such as list item data, documents and web pages in libraries, custom permission levels, and custom groups. Also, it requires publishing feature, and thus requires SharePoint Server license. it won't work with SharePoint Foundation.
2. Variations
When variation is enabled, SharePoint will automatically build a variation of the site in parallel. This option creates a source variation site that is used to author content in one language, and then it will sync that content to one or more target variation sites in other languages. For example, you can author and publish content in English language for http://yoursitename.com/en, and use variation to sync content to http://yoursitename.com/fr, where it can be translated into French.
Limitations:
SharePoint creates two alternate versions of the site as you build out the structure of the source site. This option basically increases the content DB size as it creates new site collection for each variation. It can’t translate any content you build on the source site. You will need to recreate the content from the source site to variation site. It also requires publishing feature, hence can work only with SharePoint Server.
3. Google Translation
The 3rd option while creating a multilingual site is using the machine translation tool. Google Translation is free option for language translation tool for SharePoint. The SharePoint site is run through a translation engine and re-rendered in selected language. It works with SharePoint foundation, too. Here, we will see how we can convert whole SharePoint site content in preferred language.
How to implement multilingual site using Google Translate:
I have created a WSP package in SharePoint solution which contains:
1. User Control - For a dropdown control which contains a list of available languages.
2. JavaScript - To translate the content in other languages.
3. Custom master page – to add control in it, so that the translation control will be available throughout the site.
Step 1:
Create a user-control(.ascx) with dropdown list through which user can select a language to translate site content. Here, I have added only few languages, but we can add as many as needed.
e.g.
<li role="presentation"><a href="#" data-lang="Indonesian" role="menuitem" tabindex="-1">Indonesian </a> </li>
<div id="google_translate_element" style="display: none !important;"></div>
<div class="dropdown" style="margin: 0px; text-align: right; padding-right: 0px;">
<!-- Use CSS to replace link text with flag icons -->
<a class="dropdown-toggle" id="translatebutton" data-toggle="dropdown" aria-expanded="true"><!--<img/>--> Translate </a>
<div class="dropdown-menu dropdown-menu-right translation-links" role="menu" aria-labelledby="dropdownMenu1" id="translateblock">
<div id="translateblocknotice">Select your language </div>
<ul class="col-md-3 col-xs-6 translateblockcolumn">
<li role="presentation">
<a href="#" data-lang="English" role="menuitem" tabindex="-1"> English </a> </li>
<li role="presentation">
<a href="#" data-lang="Afrikaans" role="menuitem" tabindex="-1"> Afrikaans </a></li>
<li role="presentation">
<a href="#" data-lang="Albanian" role="menuitem" tabindex="-1"> Albanian </a> </li> <li role="presentation">
<a href="#" data-lang="Swahili" role="menuitem" tabindex="-1"> Swahili </a> </li> </ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="http://translate.googleapis.com/translate_static/js/element/10/element_main.js" type="text/javascript"></script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', layout:
google.translate.TranslateElement.InlineLayout.SIMPLE
},
'google_translate_element');
}
</script>
<script type="text/javascript">
$('.translation-links a').click(function () {
var lang = $(this).data('lang');
var $frame = $('.goog-te-menu-frame:first');
if (!$frame.size()) {
alert("Error: Could not find Google translate frame.");
return false;
}
$frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
return false;
});
</script>
Step 2:
Now, open master page and reference the user control we have created. After adding the user control, master page will look like:
<div class="col-lg-6 col-xs-5" id="translate">
<!--SPM:<%@ Register TagPrefix="ucTranslator" TagName="Translator" Src="~/_controltemplates/15/MyProject/Translator.ascx" %>-->
<!--CS: Start Create Snippets From Custom ASP.NET Markup Snippet-->
<!--SPM:<ucTranslator:Translator runat="server" id="Translator"/>-->
<!--CE: End Create Snippets From Custom ASP.NET Markup Snippet-->
</div>
Step 3:
Build and deploy the solution.
Results
As shown in below image, you can see Translate link on top of the page. Click on Translate link and select any language, site content will be translated in the desired language.
On clicking Translate link, it shows available languages content can be translated into.
Selecting Chinese language, content will be translated as shown below.
The limitation of this approach is, it won’t work with left to right language like Arabic. It will just convert the content in Arabic language. "Variation" is the option if you want entire site to be translated from Right to left through.
If you have any questions you can reach out our SharePoint Consulting team here.
There are multiple ways to implement multilingual sites in SharePoint, like MUI, Variation, Google Translate. Here, I will explain the basic concept of these 3 options that can be used which suites our requirements.
1. Multilingual User Interface(MUI)
This option creates a site in default language that is selected while creating a Site. For example, if the Chinese language is selected when the site was created, the site user interface will appear in Chinese. We need to add different language pack and configure site for multiple languages.
Limitations:
It only affects the site administration pages and OOTB SharePoint navigation, welcome message, column headers etc. But it doesn’t support user-created content, such as list item data, documents and web pages in libraries, custom permission levels, and custom groups. Also, it requires publishing feature, and thus requires SharePoint Server license. it won't work with SharePoint Foundation.
2. Variations
When variation is enabled, SharePoint will automatically build a variation of the site in parallel. This option creates a source variation site that is used to author content in one language, and then it will sync that content to one or more target variation sites in other languages. For example, you can author and publish content in English language for http://yoursitename.com/en, and use variation to sync content to http://yoursitename.com/fr, where it can be translated into French.
Limitations:
SharePoint creates two alternate versions of the site as you build out the structure of the source site. This option basically increases the content DB size as it creates new site collection for each variation. It can’t translate any content you build on the source site. You will need to recreate the content from the source site to variation site. It also requires publishing feature, hence can work only with SharePoint Server.
3. Google Translation
The 3rd option while creating a multilingual site is using the machine translation tool. Google Translation is free option for language translation tool for SharePoint. The SharePoint site is run through a translation engine and re-rendered in selected language. It works with SharePoint foundation, too. Here, we will see how we can convert whole SharePoint site content in preferred language.
How to implement multilingual site using Google Translate:
I have created a WSP package in SharePoint solution which contains:
1. User Control - For a dropdown control which contains a list of available languages.
2. JavaScript - To translate the content in other languages.
3. Custom master page – to add control in it, so that the translation control will be available throughout the site.
Step 1:
Create a user-control(.ascx) with dropdown list through which user can select a language to translate site content. Here, I have added only few languages, but we can add as many as needed.
e.g.
<li role="presentation"><a href="#" data-lang="Indonesian" role="menuitem" tabindex="-1">Indonesian </a> </li>
<div id="google_translate_element" style="display: none !important;"></div>
<div class="dropdown" style="margin: 0px; text-align: right; padding-right: 0px;">
<!-- Use CSS to replace link text with flag icons -->
<a class="dropdown-toggle" id="translatebutton" data-toggle="dropdown" aria-expanded="true"><!--<img/>--> Translate </a>
<div class="dropdown-menu dropdown-menu-right translation-links" role="menu" aria-labelledby="dropdownMenu1" id="translateblock">
<div id="translateblocknotice">Select your language </div>
<ul class="col-md-3 col-xs-6 translateblockcolumn">
<li role="presentation">
<a href="#" data-lang="English" role="menuitem" tabindex="-1"> English </a> </li>
<li role="presentation">
<a href="#" data-lang="Afrikaans" role="menuitem" tabindex="-1"> Afrikaans </a></li>
<li role="presentation">
<a href="#" data-lang="Albanian" role="menuitem" tabindex="-1"> Albanian </a> </li> <li role="presentation">
<a href="#" data-lang="Swahili" role="menuitem" tabindex="-1"> Swahili </a> </li> </ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="http://translate.googleapis.com/translate_static/js/element/10/element_main.js" type="text/javascript"></script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', layout:
google.translate.TranslateElement.InlineLayout.SIMPLE
},
'google_translate_element');
}
</script>
<script type="text/javascript">
$('.translation-links a').click(function () {
var lang = $(this).data('lang');
var $frame = $('.goog-te-menu-frame:first');
if (!$frame.size()) {
alert("Error: Could not find Google translate frame.");
return false;
}
$frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
return false;
});
</script>
Step 2:
Now, open master page and reference the user control we have created. After adding the user control, master page will look like:
<div class="col-lg-6 col-xs-5" id="translate"><!--SPM:<%@ Register TagPrefix="ucTranslator" TagName="Translator" Src="~/_controltemplates/15/MyProject/Translator.ascx" %>-->
<!--CS: Start Create Snippets From Custom ASP.NET Markup Snippet-->
<!--SPM:<ucTranslator:Translator runat="server" id="Translator"/>-->
<!--CE: End Create Snippets From Custom ASP.NET Markup Snippet-->
</div>
Step 3:
Build and deploy the solution.
Results
As shown in below image, you can see Translate link on top of the page. Click on Translate link and select any language, site content will be translated in the desired language.
On clicking Translate link, it shows available languages content can be translated into.
Selecting Chinese language, content will be translated as shown below.
The limitation of this approach is, it won’t work with left to right language like Arabic. It will just convert the content in Arabic language. "Variation" is the option if you want entire site to be translated from Right to left through.
No comments:
Post a Comment