Localization in SharePoint Online

Introduction

Localization is handled neatly by SharePoint but when it comes to custom code it becomes a challenge. It becomes much more challenging when we need to implement localization in SharePoint Online as we cannot put any resource files in '_layouts' folder.

In this article, we will explore on how to use JavaScript classes for an easy way for localization.

Setup and Structure

We will have one common JS file which will contain all our resource strings. This file has multiple class so that it's easy to use during development. Name of this common resource file is ‘CODResource.js’

This will be the master list of all the resource string, in case some translations not found – Code will fallback to this file.

var CS = function () {
    return {
        Title: "This is the title in EN-US",
        SubText: "Second level of content",
        SubText2: "Third level of content",
        LinkHeader: "Click here"
    }
}
var PS = function(){
    return{
        HelpMenu:"help your self",
        Awesome:"This is awesome",
        NOTALLPLACES:"THIS STRING IS ONLY IN DEFAULT",
    }
}
var CODImpl = function(){
    return{
        CS:new CS(),
        PS:new PS()
    }
}
var COD_Default = new CODImpl();

Now we will have different translation files with their specific local extension.

Like:

CODResource.en-us.js    - ENGLISH (US)
CODResource.hi-in.js      - HINDI
CODResource.de-de.js   -GERMEN
.....

And more depending upon languages supported.

Each file will have their specific translations like:
Hindi: CODResource.hi-in.js

var CS = function () {
    return {
        Title: "यह हिंदी में शीर्षक है",
        SubText: "सामग्री का दूसरा स्तर",
        SubText2: "सामग्री का तीसरा स्तर",
        LinkHeader: "यहां क्लिक करे"
    }
}
var PS = function(){
    return{
        HelpMenu:"अपनी सहायता कीजिये",
        Awesome:"यह कमाल का है"
    }
} 
var CODImpl = function(){
    return{
        CS:new CS(),
        PS:new PS()
    }
}
var COD = new CODImpl();

Germen: CODResources.de-de.js

var CS = function () {
    return {
        Title: "Das ist der Titel in Germen",
        SubText: "Zweite Ebene des Inhalts",
        SubText2: "Dritter Inhalt",
        LinkHeader: "Klick hier"
    }
}
var PS = function(){
    return{
        HelpMenu:"bedienen Sie sich",
        Awesome:"Das ist fantastisch"
    }
}
var CODImpl = function(){
    return{
        CS:new CS(),
        PS:new PS()
    }
}
var COD = new CODImpl();

All translation files are uploaded to  "Resources" folder in "Style Library". These translation files need to refer to either ‘Master Page’, ‘Page Layout’ or any other JavaScript file depended upon need.

Let’s say we refer translation in Page Layouts, it will require to include two files.

• Default translation: CODResources.js
• Specific translation: CODResources.{local}.js

Default translation is directly referred to as follows:

<SharePoint:ScriptLink language="javascript" name="~sitecollection/Style Library/Resources/CODResource.js" LoadAfterUI="true" runat="server" />

Specific translation we can take from SharePoint "language_value" variable from SharePoint resource.

<script>
    var CODfileName = _spPageContextInfo.siteAbsoluteUrl + "/Style%20Library/Resources/CODResource.<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,language_value%>' EncodeMethod='HtmlEncode' />.js";
    document.write("<script type='text/javascript' src="+ CODfileName + "><\/script>")
</script>

Or if we need to translate based on browser local then use "navigator.language" variable provided.
Finally, all needed files are included and we can use it in custom JavaScript class and variable.

  <div id=  "CODContent"  ></div>
        <script>
 
            var title = COD.CS.Title ? COD.CS.Title : COD_Default.CS.Title;
            var text = COD.CS.SubText ? COD.CS.SubText : COD_Default.CS.SubText;
            //This text is only defined in default and not in all the languages
            var expOfOnlyDefault = COD.PS.NOTALLPLACES ? COD.PS.NOTALLPLACES : COD_Default.PS.NOTALLPLACES;
            var awesome = COD.PS.Awesome ? COD.PS.Awesome : COD_Default.PS.Awesome
 
            var html = "<br/><br/><table><tr>"+title+"</tr><br/><tr>"+text+"</tr></table><br/>";
            html += expOfOnlyDefault;
            html +=   "<h1>"  + awesome +   "</h1>"
 
            $(  "#CODContent"  ).html(html);
               
  </script>

It will look as follows in two different languages,