Localization and Accessibility

Introduction

Localization and accessibility are essential components in modern web applications to ensure that users from different regions and with varying needs can use the application effectively. This guide covers how to implement language switching, automatically setting the user locale based on their browser's settings, and enhancing accessibility in Joget applications.

How does it work?

To implement these features, follow these steps:

Changing user locale based on browser setting

Joget allows you to change the language locale automatically by picking up the locale returned by the end user's browser. This ensures that users see the application in their preferred language without manual intervention.

Before proceeding, ensure you have already translated/localized the languages you intend to support. If not, you won't be able to see the desired impact when changing the locale later on. For more information, see Builder Advanced Tools#i18n Internationalization.

HTML for manual language switching

You can place the following HTML to display language icons on the top right for manual switching. This code is adapted from Change User Locale In UI 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>

Custom javaScript for browser locale detection

This JavaScript code detects the user's browser locale and reloads the page in the new locale if it matches any of the supported languages in your application:

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] );
    }
});

• Line 1: The getLang() function retrieves the browser's locale.
• Line 30: Defines the languages supported by your Joget application (supportedLanguages = ["en_US","fr","pt","zh_CN"];).

Changing user locale in UI header

If you prefer to allow users to change the language from the UI header manually, you can implement a language selector in the header.

HTML for UI header language selector

Place the following code in the Sub Header section of the DX 8 Plain Theme. Update the #appResource paths to point to your country flag images:

<div id="languages">
    <li><a href="?_lang=en_US" class="btn waves-effect btn waves-button waves-float"><img  style= "height:30px;width:40px" title="English" src="#appResource.US-United-States-Flag-icon.png#"/></a></li>
    <li><a href="?_lang=pt_BR" class="btn waves-effect btn waves-button waves-float"><img style= "height:30px;width:40px" title="Portuguese" src="#appResource.PT-Portugal-Flag-icon.png#"/></a></li>
</div>
  
<script>
$(function(){
    $("#page > header > div.navbar-inner > div > div.nav-no-collapse.header-nav > ul").prepend( $("#languages li") );
});
</script>

Uploading resources

To use the flags for language switching, you'll need to upload the flag images to your Joget application:

1. Go to App Composer > Resources.
2. Upload the flag images with appropriate filenames like US-United-States-Flag-icon.png and PT-Portugal-Flag-icon.png.
   

Download sample app