Localization with JSOM in SharePoint hosted app

Question

I have a SharePoint hosted app. The whole provisioning is with JSOM. The app creates a subsite of the host web and columns, content types etc on the host itself and they are inherited to the subsites. I need to translate the columns names to German. I created 2 resource js files and renamed the display names of my columns to $Respurces:Estimate for example. But it doesnt work. It seems that it can not take the resources files.

Can somebody help me on that? Thanks

Answer 1

There are some strings you can retrieve from the strings.js file /_layouts/15/1031/strings.js. But likely you wont find all ressources you need. The best way to do a multi-language UI was to implement it myself.

Here's my helper class for that:

var languageProvider = (function(_this){
    _this = this; 

    var ressource = {
        'en-US':{
            startSearch: 'Start search'
        }, 
        'de-DE': {
            startSearch: 'Suche starten'
        }
    };

    /*
    * Recursively merge properties of two objects 
    * http://stackoverflow.com/a/383245/1540688
    */
    var mergeRecursive = function(obj1, obj2) {
        for (var p in obj2) {
            try {
                // Property in destination object set; update its value.
                if ( obj2[p].constructor==Object ) {
                    obj1[p] = MergeRecursive(obj1[p], obj2[p]);
                } else {
                    obj1[p] = obj2[p];
                }
            } catch(e) {
                // Property in destination object not set; create it and set its value.
                obj1[p] = obj2[p];
            }
        }
        return obj1;
    };

    var getRessource = function(culture, id){
      return res = ressource[culture] && ressource[culture][id] || 'Not defined';   
    };

    var extend = function(newRessourceDict){
        ressource = mergeRecursive(ressource, newRessourceDict);
    };

   _this.getRessource = getRessource; 
   _this.extend = extend; 

   return _this;
})({});

//usage example
languageProvider.getRessource('en-US', 'startSearch');
// --> "Start search"
languageProvider.getRessource('de-DE', 'startSearch');
// --> "Suche starten"

//or better (my UI language is german)
languageProvider.getRessource(_spPageContextInfo.currentUICultureName, 'startSearch');
// --> "Suche starten"

//if you dont want to have all ressources at one place (and maybe use several files foreach language) there's a extend function
languageProvider.extend({
    'ru-RU': {
         startSearch: 'начать поиск', 
         someOtherString: 'пример'
    }
});

languageProvider.getRessource('ru-RU', 'startSearch');
// --> "начать поиск"
languageProvider.getRessource('ru-RU', 'someOtherString');
// --> "пример"

Here's a similar example: https://msdn.microsoft.com/de-de/library/office/fp179919.aspx