Introduction
There are multiple ways that you can have multilingual sites in SharePoint. Like MUI, Variation, Google Translate. This blog will explain the basic concepts of all 3 options and you can use the best that suites your requirement.
1. Multilingual User Interface(MUI)
This option creates a site in default language selected when creating site. For example, if the Chinese language is selected when the site is 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 Menus, 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 and will not 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 to French and publish it.
Limitations:
SharePoint will create two alternate versions of the site for you as you build out the structure of the source site. This option basically increases the content DB size as it creates the 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 in your Variation sites. It requires publishing so can work on SharePoint Server and will not work with SharePoint Foundation.
3. Google Translation
The final option to consider when creating a multilingual site is using the machine translation tool. Google Translation is free option for language translation in SharePoint. The SharePoint site is run through a translation engine and re-rendered in the selected language. It works with SharePoint foundation too. Here we will see how can we convert whole SharePoint site content in preferred language.
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) file in which you need to create a dropdown list to select a language to translate your site content in a web browser. Here, I have added only few languages, but you can add as many as you need.
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
Open the master page and add the user control we have created at your convenient place.
After adding the user control, the code in master page will look like this:
<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
Here is a site in which you can find a Translate link in top of the page. Click on Translate and click On any language, you will get your site translated in the selected language.
Link button called 'Translate' is added.
On clicking Translate, it displays available languages to translate content into.
I have clicked here on Chinese to translate content in Chinese language.
