There is great post from Geertjan Wielenga about Translating Oracle JET Applications. If you want to introduce multi language support into JET app - this is great place to start reading from. We are building production Oracle Cloud app with ADF BC REST and JET. This app requires multi language support - English and Lithuanian. I will describe below how we integrated multi language into various areas in the app.
Download or browse through sample application in GitHub repo - JETPlaygroundApp.
In JET we could set default language in index page html root tag. By default it is set to en-US, but it can be set to lt-LT for Lithuanian language or any other language:
Translation texts are located in message bundles. There is one default message bundle for English and translations are located in sub folders. English bundle:
Lithuanian bundle with translations for the same message keys:
Multi language bundle support must be registered in main.js (bundle file name can be anything):
Values for all labels/texts must be defined as observables and initialised from JET translation API by passing message key - this will bring default text:
When language is changed, we need to update observable values and reset language value in HTML tag. I'm changing menu labels as well by re-configuring JET router:
On UI in index.html message key is referenced directly from observable variable:
We can access message key defined in appController from individual JET module UI through $parent. For example, I'm using dueDate message key in incidents module:
Same message key is reused in another module - customers:
This is how language switch looks on UI - language change is available in preferences:
When we switch to Lithuanian language - texts are changed (the ones assigned with translatable messages):
Menu labels are also changes, JET Router is reset:
Labels are change in built-in JET components - such as date. Though is not translated completely for Lithuanian language (Today text remains in English):
Download or browse through sample application in GitHub repo - JETPlaygroundApp.
In JET we could set default language in index page html root tag. By default it is set to en-US, but it can be set to lt-LT for Lithuanian language or any other language:
Translation texts are located in message bundles. There is one default message bundle for English and translations are located in sub folders. English bundle:
Lithuanian bundle with translations for the same message keys:
Multi language bundle support must be registered in main.js (bundle file name can be anything):
Values for all labels/texts must be defined as observables and initialised from JET translation API by passing message key - this will bring default text:
When language is changed, we need to update observable values and reset language value in HTML tag. I'm changing menu labels as well by re-configuring JET router:
On UI in index.html message key is referenced directly from observable variable:
We can access message key defined in appController from individual JET module UI through $parent. For example, I'm using dueDate message key in incidents module:
Same message key is reused in another module - customers:
This is how language switch looks on UI - language change is available in preferences:
When we switch to Lithuanian language - texts are changed (the ones assigned with translatable messages):
Menu labels are also changes, JET Router is reset:
Labels are change in built-in JET components - such as date. Though is not translated completely for Lithuanian language (Today text remains in English):
Thank you very Andrejus. You saved my time. I tested your approach in my sample application and it is working perfectly. Before implementing your approach, I followed the steps mentioned in the developer's guide https://docs.oracle.com/middleware/jet112/jet/developer/GUID-D39E5505-03A3-468E-A2BC-A0636CDE4887.htm#JETDG355 but the translations was not working properly. The lang="xx-YY" attribute returns the correct value in the html tag but the UI was not refreshed, so I see the labels of previous language even after changing the language.
ReplyDeleteIt seems like the locale configuration must be in high level module (like appController.js) of the application and all the translations must be added there. Please correct me if I'm wrong.
Hi Raj,
ReplyDeleteYou should follow same approach as implemented in sample app.
Regards,
Andrejus
Hi Andrejus,
ReplyDeleteI followed your approach and its working. Thank you very much.
Regards,
Raj
Great !
ReplyDelete