What are the best practices for localization (app translation)?

[igoraguiar]

Hi guys, from your experience what is the best approach to having a consistent app in more than one language?

Thanks!

[minijohn]

Hey @igoraguiar, so I needed Internationalisation a few projects ago and solved it like this:

1. Connect to a resource that stores your translations (I'm using google sheets in the example).
   
   

The object is the key you'll be using throughout your app to reference a translation.

Row B & C store the translated string of the object, you can add as many translations as you want by adding another row and filling out the values for all objects.

2. Create a JS query that transforms your data from the sheet and caches the response. You don't want to be hitting that query for every element that accesses the translations. Also make it run on page load.

I can't find my original code but it goes something like this:

var app_language = app_language.value
var translations = get_translations.data
var mapping = {}

for (var i = 0; i < translations.length; i++) {
  mapping[translations[i].object] = translations[i][app_language]
}

return mapping

You then just reference the translation you want for the object:

{{i18n.data.refresh}} // for the refresh button
{{i18n.data.open}} // for the open button

This simple structure gives you:

Here's the JSON export of the sample app, hope it helps

[igoraguiar]

@minijohn i'm so sorry that I never answered you back. Thank you so much! This looks amazing!

[minijohn]

Hey @igoraguiar,

No worries :)) Hope it helps

[ikrikelas]

Can you please explain how can i do the translation for days in the calendar object?
Instead of showing Sunday XX/XX/XXX i want it localized.

I completed step 1 and 2.

I do not know what to do here: "You then just reference the translation you want for the object:"

[igoraguiar]

@ikrikelas for dates you should use moment.js library, available by default with Retool.

It would look something like this:

{{moment(currentRow.createdAt).locale("pt").format("dddd D/MMM H:mm")}}

where currentRow.createdAt is the timestamp field you want to show.

In this case the result would be something like this
Domingo 14/Ago 12:45

instead of this
Sunday 14/Aug 12:45

[slawik1978]

Hello.

how can i find object name for elements like in the screenshot. this is a select in modal. I would also like to translate such elements

[igoraguiar]

Welcome to the community @slawik1978

For this you would use a custom rule in the validation section of the element. Something like this should work:

[slawik1978]

sooo easy)))

thank you very much

[slawik1978]

and one more question: how can i translate toolbar elements like in screenshot

[QuentinSc]

Hey, would like to know how to translate the toolbar too

[Tess]

Hi all! Localization is not natively supported for the table toolbar, but we have a feature request on file

[QuentinSc]

Hello,
The new calendar component is great but dates are important to translate when building an app.
How to do this for all of this text ?

Thank you !

[Tess]

Thanks @QuentinSc! We are still evaluating language localization requests across the product, but I'll post here if we move forward with supporting this for any of our components

[QuentinSc]

Thank you @Tess, I'm making an appointement app for french users, and the impossibility to translate calendar view and calendar inputs is a blocking point.
This will possibly make us leave Retool.
If we can have visibility on the roadmap, maybe I could deal with it for first months.

[Tess]

Hi @QuentinSc Thanks for letting me know! It's something that we want to build support for, but I think it will be a longer term project. It's not something we're currently working on

If possible, I would recommend looking into spinning up a custom React component to support your use case for the time being.

[slaw]

Hi @Tess! What's the latest on language localization?

[Tess]

Hi @slaw I don't have any concrete updates yet It's something that has been requested quite a bit lately, so hopefully we can get it added to the roadmap soon