Why does .get_title() called from an (SPOnline) App-Web return an incorrect Localized DisplayName?

Question

!! this is NOT about localisation of the App Web
Its about getting an incorrect response from the HostWeb when using get_title() !!

Can someone please explain me where I go wrong with the testcode (all the way the bottom)

I develop https://www.365csi.nl/vm365com Apps [using Microsoft Napa! so I can not do anything with .Net code] which Create Calculated Columns in the Host-Web; so in the Formulas I need to use Localized DisplayNames on non-english sites.

MSDN documentation for Field.get_title() says: Gets or sets value that specifies the display name of the field.

But On the same non-english Subsite get_title() returns different results when run directly in the site compared to when run from an App.

Steps to reproduce:

Run code in a teamsite

1. Create a non-english Locale subsite I used German in my example, its not my own language but can read it
2. Run the script below in Chrome Snippets

This produces the results I expect, get_title() gets me the localized DisplayName

Run code from an App-web

1. [install an (english¿) App with read rights in]
2. Now open the App in that same subsite (now Host-web)
3. Run the script below in Chrome Snippets the script is now accessing the subsite through the App-web

Now get_title() returns me the DisplayName as if the site was an English Locale;

!! extracting the DisplayName from the SchemaXml clearly shows the correct DisplayName !!

It looks to me like get_title() returns the Locale DisplayName of the App Web instead of the Host-Web.. (I have not tested what happens with an App which is not in english.. couldn't find one; and with Napa I can only create english Apps)

Test code

Code to be run as Chrome Snippets (or any way you want it)

try-catch is used to try App code first; if it fails it defaults to the current ClientContext

    var listName='Tasks';
    var reportDIV=document.getElementById('DeltaPlaceHolderMain');
    var listTitle='<h1>'+listName+'</h1>';
    reportDIV.innerHTML=listTitle;
    var context,web;
    JSRequest.EnsureSetup();
    try{
        context = new SP.ClientContext(decodeURIComponent(JSRequest.QueryString["SPAppWebUrl"]));
        var appContextSite = new SP.AppContextSite(context, decodeURIComponent(JSRequest.QueryString["SPHostUrl"]));
        web = appContextSite.get_web();
    } catch(e){
        context = new SP.ClientContext.get_current();
        web=context.get_web();    
    }
    listTitle+='<h2>context.get_url() = '+context.get_url()+'</h2>';
    var fields=web.get_lists().getByTitle( listName ).get_fields();
    context.load(fields);
    context.executeQueryAsync(
        function(){
            var fieldEnumerator = fields.getEnumerator();
            var rows=0,table='<tr><td><b>get_internalName()</b></td><td><b>get_title()</b></td><td><b>DisplayName from get_schemaXml()</b></td></tr>';
            while (fieldEnumerator.moveNext()) {
                var field=fieldEnumerator.get_current();
                var DisplayName = field.get_schemaXml().split('DisplayName="')[1].split('"')[0];
                var Title=field.get_title();
                Title = DisplayName!=Title ? '<b style="color:red">'+Title+'</b>' : Title;
                var cols = []; cols.push( field.get_internalName() , Title , DisplayName );
                table+='<tr style="background-color:#E0E7F'+(rows++%2?1:10)+'"><td>'+cols.join('</td><td>')+'</td></tr>';
            }
            reportDIV.innerHTML=listTitle+'<table width=100%>'+table+'</table>';
        }
    ,
        function( sender,args){ alert(args.get_message())}
    );

Answer 1

SP.Field.title property returns display name of the field based on the language that is used on the current site (SP.Web.language property). So, i believe that your assumption:

It looks to me like get_title() returns the Locale DisplayName of the App Web instead of the Host-Web..

is correct.

In order to return field display name for specific locale SP.Field.TitleResource property is intended. The following example demonstrates how to return field display name for the current locale:

var titleRes = field.get_titleResource();
var  titleResVal = titleRes.getValueForUICulture(_spPageContextInfo.currentCultureName);

Modified example

var listName='Tasks';
var reportDIV=document.getElementById('DeltaPlaceHolderMain');
var listTitle='<h1>'+listName+'</h1>';
reportDIV.innerHTML=listTitle;
var context,web;
JSRequest.EnsureSetup();
try{
    context = new SP.ClientContext(decodeURIComponent(JSRequest.QueryString["SPAppWebUrl"]));
    var appContextSite = new SP.AppContextSite(context, decodeURIComponent(JSRequest.QueryString["SPHostUrl"]));
    web = appContextSite.get_web();
} catch(e){
    context = new SP.ClientContext.get_current();
    web=context.get_web();    
}
listTitle+='<h2>context.get_url() = '+context.get_url()+'</h2>';
var fields=web.get_lists().getByTitle( listName ).get_fields();
context.load(fields,'Include(Title,TitleResource,SchemaXml,InternalName)');
context.executeQueryAsync(
    function(){
        var result = [];
        var e = fields.getEnumerator();
        while (e.moveNext()) {
            var field = e.get_current();
            var displayName = field.get_schemaXml().split('DisplayName="')[1].split('"')[0];
            var titleRes = field.get_titleResource();
            var  titleResVal = titleRes.getValueForUICulture(_spPageContextInfo.currentCultureName);
            result.push({'TitleResource': titleResVal,'DisplayName': displayName,'InternalName': field.get_internalName()}); 
        }
        context.executeQueryAsync(function(){
            var output = '<tr><td><b>get_internalName()</b></td><td><b>get_title()</b></td><td><b>DisplayName from get_schemaXml()</b></td></tr>';
            for(var row = 0; row < result.length;row++) {
                 var displayName = result[row].DisplayName;
                 var titleRes = result[row]['TitleResource'].get_value();
                 var titleResHtml = displayName != titleRes ? '<b style="color:red">' + titleRes + '</b>' : titleRes;
                 var cols = []; cols.push( result[row].InternalName , titleResHtml , displayName );
                 output += '<tr style="background-color:#E0E7F'+(row++%2?1:10)+'"><td>'+cols.join('</td><td>')+'</td></tr>';
            }
            reportDIV.innerHTML=listTitle+'<table width=100%>'+output+'</table>';
        },
        function(){
            reportDIV.innerHTML= String.format('<div width=100%>An error occured: {0}</div>',args.get_message());
        });
    },
    function( sender,args){ 
       reportDIV.innerHTML= String.format('<div width=100%>An error occured: {0}</div>',args.get_message());
    }
);

Update

The following example demonstrates how to retrieve field display names based on the language that is used on the host web.

Key points:

• SP.Web.get_language() method is used to determine host web site language (lcid)
• since SP.Field.TitleResource.getValueForUICulture method expects UI cutlture name, SP.ServerSettings.getGlobalInstalledLanguages method is used for getting languages info

Example:

var listName='Tasks';
var reportDIV=document.getElementById('DeltaPlaceHolderMain');
var listTitle='<h1>'+listName+'</h1>';
reportDIV.innerHTML=listTitle;
var context,web;
JSRequest.EnsureSetup();
try{
    context = new SP.ClientContext(decodeURIComponent(JSRequest.QueryString["SPAppWebUrl"]));
    var appContextSite = new SP.AppContextSite(context, decodeURIComponent(JSRequest.QueryString["SPHostUrl"]));
    web = appContextSite.get_web();
} catch(e){
    context = new SP.ClientContext.get_current();
    web=context.get_web();    
}


var languages = SP.ServerSettings.getGlobalInstalledLanguages(context,15); //Retrieve all installed languages
context.load(web,'Language'); //Retrieve host web language


listTitle+='<h2>context.get_url() = '+context.get_url()+'</h2>';
var fields=web.get_lists().getByTitle( listName ).get_fields();
context.load(fields,'Include(Title,TitleResource,SchemaXml,InternalName)');
context.executeQueryAsync(
    function(){

        //find host web language info
        var language = languages.filter(function(l) {
                      return web.get_language() === l.get_lcid(); 
                   })[0];
        var langTag = language.get_languageTag();           

        var result = [];
        var e = fields.getEnumerator();
        while (e.moveNext()) {
            var field = e.get_current();
            var displayName = field.get_schemaXml().split('DisplayName="')[1].split('"')[0];
            var titleRes = field.get_titleResource();
            var  titleResVal = titleRes.getValueForUICulture(langTag);
            result.push({'TitleResource': titleResVal,'DisplayName': displayName,'InternalName': field.get_internalName()}); 
        }
        context.executeQueryAsync(function(){
            var output = '<tr><td><b>get_internalName()</b></td><td><b>get_title()</b></td><td><b>DisplayName from get_schemaXml()</b></td></tr>';
            for(var row = 0; row < result.length;row++) {
                 var displayName = result[row].DisplayName;
                 var titleRes = result[row]['TitleResource'].get_value();
                 var titleResHtml = displayName != titleRes ? '<b style="color:red">' + titleRes + '</b>' : titleRes;
                 var cols = []; cols.push( result[row].InternalName , titleResHtml , displayName );
                 output += '<tr style="background-color:#E0E7F'+(row++%2?1:10)+'"><td>'+cols.join('</td><td>')+'</td></tr>';
            }
            reportDIV.innerHTML=listTitle+'<table width=100%>'+output+'</table>';
        },
        function(){
            reportDIV.innerHTML= String.format('<div width=100%>An error occured: {0}</div>',args.get_message());
        });
    },
    function( sender,args){ 
       reportDIV.innerHTML= String.format('<div width=100%>An error occured: {0}</div>',args.get_message());
    }
);

Answer 2

Just add German localization in a Visual Studio for your app. Double click on AppMinifest.xml. Add localization tab. New Resource file will be created. You can leave it empty. Then re-add your app. And now all should work fine.

Answer 3

Found my old post i answered to regarding this, from when i had a similar issue. Please see if below helps.

Language in SharePoint that is Displayed to the user is based on a the HTTP Request Header ["Accepted Languages"] or the SharePoint language cookie if the user selects a specific language in the SharePoint language selection menu. This menu is only shown when activating one or more alternative languages on a site collection.

If you want to change language in the background for a specific part of the code then you will need to set the current running threads to the language you want to use.

System.Threading.Thread.CurrentThread.CurrentUICulture.Name="no" 
System.Threading.Thread.CurrentThread.CurrentCulture.Name="no"

By default Ajax requests for example, will fall back to the site collections default language, the language you selected as default when creating the site collection. On normal page requests it will use the users selected language(cookie or Accepted Languages)

And as mentioned before SPWeb.Local only has a public Get not a Set.

Old post