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