How to localize your app?

0
Hi, we need to support multiple languages in our project. The supported languages are added to the project, and all the views, labels and texts have been translated. Then the system shows the app in your preferred language. The preferred language is set on the user account. But what about the login page, and the forgot password functionality. How do you handle that? We need to support both desktop browser and mobile hybrid app. Edit: The first thing you want to do is to change the language of the anonymous user. There are already some challenges there see topics https://community.mendix.com/link/questions/23192 and https://community.mendix.com/link/questions/87018 and you can find more if you want. However I could not find this topic in the ideas forum, so I submitted the idea here check: https://community.mendix.com/link/ideas/441 It would be nice if you give this idea some loving<3
asked
2 answers
1

The problem is that at that point the user is an anonymous user and hence you do not know the preferred language of the user. The only sollution I can think of is creating extra buttons on the login page with language labels so users can be redirected to the login page in their language. The same sollution can be created with the default forgot password screen. Show again buttons redirecting that user to different pages in their preferred language.

Regards,

Ronald

 

answered
0

Wilfried,

If the user is using the browser in the same language as the account he will be using you could try the following for the login page:

Add the following style section (the example is for en-US else the German language, but it's easy to expand):

<style>
	body.en :lang(de) {display: none;}
	body.de :lang(en) {display: none;}
</style>

Make sure the body tag has the class de:

<body class="de">

In the body class copy the login-container div for the German language and modify strings like below:

<div class="login-container" lang="en">
  <form id="loginForm" class="login-form">
    <div class="login-logo"></div>
    <div id="loginMessage" class="alert alert-danger login-message"></div>
    <div class="form-group">
     <label id="usernameLabel" for="usernameInput">User name</label> 
     <input id="usernameInput" class="form-control" type="text" placeholder="User name" autocorrect="off" autocapdealize="none">
    </div>
    <div class="form-group">
     <label id="passwordLabel" for="passwordInput">Password</label> 
     <input id="passwordInput" class="form-control" type="password" placeholder="Password" autocorrect="off" autocapdealize="none">
    </div>
    <button id="loginButton" type="submde" class="btn btn-primary">Sign in</button>
    </form>
    </div>
		
<div class="login-container" lang="de">
  <form id="loginForm" class="login-form">
   <div class="login-logo"></div>
   <div id="loginMessage" class="alert alert-danger login-message"></div>
   <div class="form-group">
    <label id="usernameLabel" for="usernameInput">Benutzername</label> 
    <input id="usernameInput" class="form-control" type="text" placeholder="Benutzername" autocorrect="off" autocapdealize="none">
    </div>
    <div class="form-group">
     <label id="passwordLabel" for="passwordInput">Passwort</label> 
     <input id="passwordInput" class="form-control" type="password" placeholder="Passwort" autocorrect="off" autocapdealize="none">
    </div>
    <button id="loginButton" type="submde" class="btn btn-primary">Anmelden</button>
    </form>
    </div>

Note the lang property on the first div for the two languages.

Now add the following script to the page:

<script>
	function langfunction(){
		var language = window.navigator.userLanguage || window.navigator.language;
		if (language == 'en-US'){
			document.body.className='en';
		} 
		else { 
		document.body.className='de';
		}
	}
	window.onload= langfunction;
</script>

This will detect the language in the browser and change the body class to the desired class and will show the localized content. For more details on the selected language look at this page explaining in the answers more details on the language being selected with the javascript function. 

Hope this helps in setting up your login page in multiple languages, there is still some  work to do as the error messages will still show up in the default language, so that still needs a workaround. But I hope this gets you going.

answered