Introduction

In this article, we will showcase ability to set language locale automatically by picking up the locale returned by the end user's browser.


Figure 1: App Locale Changes Automatically Based on Browser's Locale

Steps to Implement

Before you proceed, make sure that you have already translated/localized the languages you intend to support. Please see Builder Advanced Tools#i18nInternationalization.

If not, we won't not be able to see the impact we want to when we actually change the locale later on.


Place this html to show language icons on the top right for manual switching. This code is adapted from Change User Locale In Userview Header.

<div id="languages">
    <li><a onClick="switchLanguage('en_US'); return false;" class="btn waves-effect btn waves-button waves-float"><img title="English" src="#appResource.US-United-States-Flag-icon.png#"/></a></li>
    <li><a onClick="switchLanguage('pt'); return false;" class="btn waves-effect btn waves-button waves-float"><img title="Portuguese" src="#appResource.PT-Portugal-Flag-icon.png#"/></a></li>
    <li><a onClick="switchLanguage('fr'); return false;" class="btn waves-effect btn waves-button waves-float"><img title="French" src="#appResource.FR-France-Flag-icon.png#"/></a></li>
</div>


This is the script responsible in getting the browser's locale and reloads the current page to the new locale if there's a match in languages supported by the app.

function getLang() {
  if (navigator.languages != undefined) 
    return navigator.languages[0]; 
  return navigator.language;
}

function switchLanguage(lang){
    $.cookie("language", lang);
    
    currentAddress = this.location.href;
    newAddress = removeParameterFromUrl(currentAddress, "_lang");
    
    if(newAddress.indexOf("?") > 0){
        newAddress += "&_lang=" + lang;
    }else{
        newAddress += "?_lang=" + lang;
    }

    this.location = newAddress;
}

function removeParameterFromUrl(url, parameter) {
  return url
    .replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?$'), '$1')
    .replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
}

currentUserLocale = "#currentUser.locale#"; //logged in user profile locale

supportedLanguages = ["en_US","fr","pt","zh_CN"];

$(function(){
    $("#page > header > div.navbar-inner > div > div.nav-no-collapse.header-nav > ul").prepend( $("#languages li") );
    
    //if user profile has no locale set, attempts to retrieve browser's locale and set
    if( currentUserLocale != "" && supportedLanguages.includes(getLang().substring(0,2)) && $.cookie("language") == null){
        
        language = supportedLanguages.filter(
            function(value, index, array){
                return value.substring(0,2) == getLang().substring(0,2);
            } 
        );
        
        switchLanguage( language[0] );
    }
});

In line 1, this is the function to obtain browser's locale.

In line 30, we list down the languages supported by the Joget app.

Download Sample App

You may download the sample app used in creating this article as reference to implement it in your own app.