Change User Locale In UI Header

Figure 1: UI Theme with Language Selector

1. Place the following code in "Sub Header" in DX 8 Plain Theme. Change line 2 and line 3 #appResource with 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>

2. Upload country flags using "App Composer" > "Resources".

   
   

Download Sample App

• APP_app_kb_switch_user_locale_arabic.jwa