[Multilingual Component] Locale value lost on new tabs for reactive Web

Forge Component
(16)
Published on 20 May by OutSystems R&D
16 votes
Published on 20 May by OutSystems R&D

I have a Reactive web application, and I load the translations from resource and set the locale based on user preference 'OnApplicationReady'. Everything works fine until I open the same application on a tab or do a Refresh (F5) of the page with a user already logged in, the page is rendered with the default locale and only when I navigate to a screen is the correct one used again. 


Why is the getLocale value empty in these situations? I tried to add an onInitialize on every screen to check if the locale is set and force it if it is not, but it is not 100% effective when opening a new tab.


Has anyone encountered the same behaviour? Any Idea why this happens?

Hi Paulo,

Good Day!!

I have an Idea!

  1. Create a client variable.
  2. Assign the locale whenever the locale changes.
  3. Then for example, Check if the locale in client variable is EN then do the stuffs.

Hope It helps.

Thanks and Regards,

Aravind M, Outsystems Developer.

I think I have the same problem. The translation works fine. If I press F5 a few times, the translation is gone. If I save the locale in a client variable it doesn't work either. @Paulo Bastos Do you already have a solution for this problem?


Hi, same problem for me.

Solution for this?

Thanks

Ricardo

Hi All,

Sorry for the late response. You can see an answer in here (basically you'll need to do it on the OnInitialize of screens).

Cheers,
Tiago Simões

PS: We're working on making translations in reactive (and mobile) similar to what we have in traditional web, an early access version should be available in the next few months.  


Processing Upload...

Hi All,


We have a Reactive Web App in English and Arabic and we are seeing the behavior outlined by Paulo, appearing in an unpredictable way.

OnApplicationReady we have an action which:

1. Loads translations from the DB

2. Programatically picks up the locale from the parent screen's query parameter if it exists (and if it doesn't, it reloads the screen with the default locale)

3. Calls SetLocale action of the Multilingual component with locale from 2)


Each screen (we have around 60 of them) also has a common block containing logic described in 2) and 3) in its OnInitialize action. Just to be safe, we directly added this logic in OnInitialize of one screen but it didn't seem to help either.

Although it sometimes gives us the expected outcome, hitting F5 or Enter in browser Search bar mostly renders this result:

As you can see, the Locale seems to be set correctly in JS as Arabic (and HTML direction is being respected), but the text is still showing in English. This is quite problematic, as you can imagine. (Minimal OML attached for the reference - sorry for poor UI and Arabic translations)

We've tried working with Client variables as well, but they didn't seem to help.

Is there anything else we can do regarding this problem?

Best,

TZ

Solution

Hi Tarik,

As mentioned here, in reactive apps you need to do that logic on the OnInitialize of every screen instead of OnApplicationReady. Consider encapsulating it in a global client action.

Cheers,
Tiago Simões


Solution

Hi Tiago,

Given that we had 60+ screens, I was hoping that I would be able to encapsulate this logic in a Client Action which happens On Initialize of a common block that is present on all screens.

This approach didn't work (maybe OnInitialize of the block happened too late in the pipeline), but your suggestion did. After putting it On Initialize of each screen, I managed to get it to work.

Thanks,

TZ