If you’re developping SharePoint 2013 Apps, may be like me you are interested about best solutions to localize your apps.
First, I recommend to read the following MSDN link : How to Localize apps for SharePoint: http://msdn.microsoft.com/en-us/library/fp179919(v=office.15).aspx
This article presents some things to consider to create apps with different languages.
Please note that I will speak about the localization of SharePoint hosted apps only.
So the MSDN article give you a technicle to write localized pages.
This technicle is simple :
- Create Resources.XX-XX.js file with lables in vars
- Include the good resources files in your html page
The MSDN article preconize the following code :
After JS inclusion, you can use the localized labels contained in the JS file to map it on a HTML control. For example:
<h1 id=“boo2”>This is the invariant language title.</h1>
Ok, this technicle seems to work, but in my opinion, this is not the best way to do that.
This method has a lot of disadvantages :
- If you haven’t define a JS file with the current language, you will not have translation, and your page will be empty, or you will throw a new JS exception
- You can not define a default language
- The pattern <% %> could not be use everytime in your pages because of security restrictions
- If the resource is available in the same language with different regional settings (example: en-uk and en-us), you don’t propose to use the other file
- This method doesn’t use the SPLanguage query string parameter
Step #1: create your JS resources files
First, I recommend to add scripts references to JQuery and to a custom Resources.js file. This file will be responsible for including the good resources JS file.
Now, create two resources files, called for example Resources.en-us.js and Resources.fr-fr.js. Your solution should be something like that:
Open in edit mode the file called Resources.en-us.js, and declare in this file all your English labels with JS vars, like for example:
Now edit your Resources.fr-fr.js file, and declare the same variables, but with french values, like for example :
OK, now open in edit mode the Resources.js file. This file must contain all the logical to load the good Resources.XX-XX.js file. I propose the following code to do that:
Step #2: Add localized labels in your pages
I propose a JQuery method to do that, based on html tag id attribute. For example, if you want to localized a h2 tag content:
With this method, you can translate page title too for example: