How to: Localize Custom Script Resources in SharePoint 2010 (Abhishek Verma)

Problem Statement

Many SharePoint projects and solutions need client-side JavaScript for performing activities, from displaying an alert statement to performing data validation activities. The advantage of doing many of these activities in the client is to improve the user experience and reduce the need to reload the page. However, one issue we face is how to localize text. This post addresses ways to do this.

Solution

The following approaches described here can be used in traditional ASP.NET (and by inference SharePoint because SharePoint is an ASP.NET application) to perform localization of client-side scripts:

• File Based Localization and Assembly based Localization
• Adding Localized Resources to a JavaScript File

However, because this post is referring to SharePoint 2010, you can leverage a feature that is already available in SharePoint to localize the client-side content.

There are two potential scenarios: one where you have JavaScript inline as part of the Application (.aspx) page residing in the Layouts folder or as JavaScript that is being referred in a content editor web part within a site page.

Inline JavaScript as part of an Application page

This is the simpler scenario because it is an .aspx page processed on the server. You could easily use server-side code to get the localized string from Resource files by using the following.

<script>
function GetLocalizedString() {
var message = '<%=GetGlobalResourceObject("SP2010DevMSDNResources", "SampleResourceKey") %>';
alert('Localized string value is : ' + message);
}
GetLocalizedString()
</script>

Note: The Resource file needs to be present in the AppGlobalResources folder for the SharePoint web application being used to browse to the Application page.

JavaScript Part of .js Files or Executed from the Content Editor Web Parts

This is the more interesting scenario. Because the script is executing totally on the client or in the browser as in the case of site pages or content editor web parts, you cannot use server-side methods as in the previous scenario.

The MSDN article Around the World with ASP.NET AJAX Applications describes how the ScriptResource.axd handler is referenced when you include the ScriptManager Control. This handler can be useful for this scenario because SharePoint is ultimately an ASP.NET web application and it also localizes client-side scripts. To do this, SharePoint actually calls into the same handler by using the Microsoft.SharePoint.ApplicationPages.ScriptResxHandler class.

To adapt this to this scenario, you would simply use the available handler to load the custom resource files and then use it to get the localized strings. The is accomplished with the following script:

<script
type="text/javascript"
src="/_layouts/ScriptResx.ashx?culture=en-US&name=SP2010DevMSDNResources">
</script>
<script>
var myRes = Res;
alert('Localized Value is : ' + myRes.sampleResourceKey)
</script>

In this script:

• ScriptResh.ashx is the handler file which calls into the Resource handler and Culture is the locale language for the Resource file. So if the language is en-US, the English Resource file is used to get the localized values.
• SP2010DevMSDNResources is the name of the Resource file.

This script can be included in a simple txt/html file, uploaded to the site Assets or Style libraries, and then referenced from a content editor web part as described in the topic Insert JavaScript into a Content Editor Web Part (CEWP).

Note:

• The Resource files need to be located in the 14/Resources folder, as this is the location from which the SharePoint handler looks for the localized files.
• The Resource file needs to be a language specific resource file (for example, en-US or fr-FR), because the SharePoint handler needs a locale language parameter and hence cannot read it from invariant or default Resource files.

To overcome these limitations, you will need to write your own handler. A sample handler is demonstrated here.

Note: All Reference links and URL’s are provided only for reference and are subject to the terms and conditions of the respective sites.

 

Technorati Tags: Localize JavaScript Resources,Localize SharePoint client languages