Breaking Language Barriers with Mendix: A Guide to Changing Languages for Anonymous Users
Language is the cornerstone of communication, allowing us to convey ideas, emotions, and intentions across cultural divides. In today’s interconnected world, the ability to accommodate diverse linguistic preferences is paramount, particularly in the realm of digital experiences.
Mendix recognizes the significance of language in user engagement and satisfaction. Through its innovative features, Mendix empowers developers to integrate multi-language support into their applications, transcending linguistic barriers and enhancing user accessibility.
One such feature is the ability to change languages for anonymous users, enriching the user experience by offering content in their preferred language, irrespective of their logged-in status. This blog will explore how Mendix facilitates this transformation, enabling developers to create inclusive and globally accessible applications. Let’s dive in.
Use Case
Provide a feature for the user to change the language for the entire session, without logging in to the application.
In our case, we have a login page, where the user can have the option to change their language without logging in and continuing operations in their desired language.
Prerequisites
- Anonymous users should be enabled.
- Apart from English, a secondary language should be there (in our case- Arabic).
How to Build It
To accomplish this use case, let's first create a simple dummy login page, and run our application to have a look at our raw login page.
Let us start with our actual implementation.
Adding a Language object Data-view
Add a dataview on the page as the parent of our building block. We can put the datasource as Microflow.
Now, let's create our microflow and name it ‘DS_GetCurrentUserLanguage’. This microflow will retrieve the language which is associated with the current user.
As shown in the image, we are constraining the Language with Xpath with the current user i.e. ‘[System.User_Language = $currentUser]’.
By default, we will always get English as the default association for the current user. We can change the default language from the language setting Option.
Language > Language Setting > Default Language.
After adding the dataview, we have the language entity on the page.
As per our requirement, we want buttons, that the users can use to change between languages.
Let's go ahead and add two buttons. We will add some custom visibility to ensure, that the button with the correct caption is visible for the current language.
Applying custom visibility
We have some custom visibility on the button, that depends on the Language code, in our case ‘en_us’ and ‘ar_SA’.
Custom Visibility expression used:
On AR button:
$Language/Code=’en_US’ On EN button:
$Language/Code=’ar_SA’ Creating Nanoflows and Microflows for Language Change
Since we believe in Reusability, we will create only a single nanoflow, which will be responsible for changing between the two languages, whenever the user wants.
So, Let’s set the on-click of our buttons to call a common nanoflow, which will start our process for language change, give it the name ‘OCH_ChangeLanguage_Anon’.
We want to make it a little bit user-friendly, so we will add a progress bar to the user, to tell the user that the Language change has been started.
Let’s look at our Nanoflow, to understand how things are happening:
As we can see we are using a show progress activity, for better UX.
Since, we want to access the current user, and do some operations on the language, it is not advisable to use a Nanoflow. Instead, we will be using a sub-microflow to do our desired operation. Here we have created the sub-microflow ‘SUB_AssignLanguageToCurrent’.
In the sub-microflow. We are retrieving the language from the association with the current user - using the association ‘$currentUser/User_Language’.
Since this microflow is used for both English to Arabic and Arabic to English, we will use a decision activity to determine the language we want to change to.
The condition we are checking is ‘$Language/Code = ‘en_US’’.
If the Language is English, we will retrieve the Arabic language and then we will associate the Arabic Language with the current user.
Likewise, if the Language is Arabic we will follow the same process for the English Language.
Once we have changed the association of the language with the current user, we will end the transaction of the microflow and return to our Nanoflow.
Since our Language for the current user has been changed in the server, we need the Page to get refreshed and reflect the updated data on the UI.
For this purpose, we are using a ‘JavaScript action’.
Creating JavaScript action for language change
To create a JavaScript action for reloading the page with its current state, right-click on the module> add other> JavaScript action.
We will name our JavaScript action ‘JS_ChangeLanguage’.
Let’s write our JavaScript code to continue our implementation. Click the ‘Code’ tab and switch to the code editor panel.
Remove the code between the
‘// BEGIN USER CODE’ and ‘// END USER CODE’
Mendix only recognizes the code that is written between these two lines. Anything written somewhere else will be overwritten whenever you deploy your application.
Let’s go ahead and write our code,
Now, let us add this JavaScript action to our nanoflow, so the JavaScript gets executed, once the user changes the language.
Run the Application and check the functionality works correctly.
Our final transition looks something like this:
Conclusion
With this, our Language change functionality has finally been implemented!
Looking back I would like to implement it in such a way that, whatever language the user chooses on the login page, they should be logged in with the same language they selected on the login screen.
I hope you enjoyed reading this, please leave any comments or suggestions below.
Read more
From the Publisher -
Inspired by this article to bring your ideas to life with Mendix? Sign up for a free account! You’ll get instant access to the Mendix Academy, where you can start building your skills.
For more articles like this one, visit our Medium page. And you can find a wealth of instructional videos on our community YouTube page.
Speaking of our community, join us in our Slack community channel. We’d love to hear your ideas and insights!
