SharePoint 2010: Playing with the Multilingual User Interface with JavaScript

 

I was doing some testing with the new SharePoint 2010 “multilingual user interface” (MUI) feature. If you have not seen this yet, Google/Bing it. In playing with this I got to thinking that no typical user would ever discover it. I can just see SharePoint sites everywhere with a block of text on every home page with instructions: “How to change the language settings…”. So after we get past some background on MUI, I’ll show what I’ve been playing with for user interfaces.

 

In case you have not, here’s some quick background.

• You must have language packs installed for each language
• There is no user language detection– a user must pick the language
• User created text (list and library content) is not multilingual
• Help files and administration pages are multilingual
• Site title, Quick Launch and Tab text can be entered in each language
• Managed metadata supports multiple languages
• Text can be exported for translation and then imported
• Search indexes sites in the default language of the SharePoint installation – the other languages are ignored
• Web Part titles and descriptions do not change in the user interface, unless a Web Part is a list-based Web Part
• Here’s a good place to start: http://technet.microsoft.com/en-us/library/ff805062.aspx

Here’s a site that was created in English, but has French enabled:

Here’s the same site after the user has selected French.

The site title has not changed, but can! Just edit it while in “French mode” and you will then have a title for each language.

Notice the page content and any content typed into lists and libraries has not changed.

 

Steps to get things setup:

1. Install the language packs on your web servers (Each language needs to downloaded and installed separately).
2. Turn on support for multiple languages: Site Actions, Site Settings, Language Settings (Must be done for each site!)
3. Test by going to the Welcome menu (the “your name” dropdown at the top right of the page) and clicking Select Display Language.

 

And there’s the problem!

 

As you can see in the screen above, the user has to “discover” that language options in the Welcome menu. How many new SharePoint users do you know that will ever click on their name at the top of the page?

Turns out the mechanism for language selection is quite simple. The link above just calls a JavaScript function that stores a cookie and then reloads the page.  You can do your own language selection either by creating your own cookie (not the best idea) or calling SharePoint’s built-in function.

To select French just call:

    OnSelectionChange(1036)

The number, 1036, is Microsoft’s “Locale Id” for “French-France”.  For a list of these IDs see: http://technet.microsoft.com/en-us/library/ff805062.aspx 

Note that these numbers only meaningful if you have the appropriate language packs installed.

If you want to see how they set the cookie, view the source of the the page and search for “function OnSelectionChagne”.

 

Adding your own buttons and links…

Any place where you can add HTML you can add buttons to select a language. These include the Content Editor Web Part, SharePoint Designer and else where.

For example:

<button onclick="OnSelectionChange(1036)"> French </button>
<button onclick="OnSelectionChange(1033)"> English </button>

 

Adding to Quick Launch and Top Link Bar

Yes, you can add JavaScript to Quick Launch and the Top Link Bar, except for Publishing Sites that is. For more info see here: http://techtrainingnotes.blogspot.com/2010/10/sharepoint-javascript-in-quick-launch.html

 

 

All you need to do is add the “JavaScript: OnSelectionChange(1036)” as the hyperlink!

 

 

 

.