The Visual Builder Cloud Service Blog
- September 21, 2018
Multi-Language Translations and Locale Switching in Visual Builder Applications
Oracle Visual Builder Cloud Service enables you to build applications that supports multiple languages - with an easy way to extract hard-coded strings in your app into a file that can be translated into other languages. This enables you to use the same running app to serve customers working in multiple languages.
In the demo video below we'll show you some of the key features you'll be using to make your application multilingual.
- Replacing hard-coded strings with pointers to the translatable source
- Exporting and importing arb translation files
- Setting the default locale of your application in the app-flow.json file
- Dynamically switching locale at runtime (and storing the locale on the client for future use).
One correction to the video - instead of passing the locale as just "en" you should pass a complete locale with the country too - so en-US or he-IL.
In the video I'm using two pieces of code (that I got from Duncan Mills) :
Adding the following to the app-flow.json file to define localization:
"localization": {
"locale": "{{ window.localStorage.getItem('vbcs.languageSwitcherApplication.locale') || 'en' }}"
}
A JavaScript method used to set the variable we keep on the machine to store default locale:
PageModule.prototype.setAppLanguage = function(selectedLocale){
if (selectedLocale) {
window.localStorage.setItem('vbcs.languageSwitcherApplication.locale',selectedLocale);
}
}
By the way, VBCS (and Oracle JET) also supports right-to-left languages - so for example if you add translations to Hebrew and add a button that sets the locale variable to "he" you'll get Hebrew titles. But you'll need to do one more switch which is to modify the index.html file to have dir="rtl" add to the HTML tag.
Then you can get the same app to looks like this: