Best way to create an app with multiple languages

Ask for Help
1

Hi everyone,

I am putting together a local community application and I would like to have a toggle on the app to switch between 2 languages - Thai and English. What would be the best way to do this?

Thank you in advance!

1 Like
2

Glide does not yet have a multilingual feature built in, but you could build it yourself:

  1. A different app per language
  2. Or: Different tabs in each language and activate tab visibility
  3. Or: Different components in each language on each tab, and activate component visibility

2 would be the simplest to setup, maintain and would probably give you better loading performance.

4 Likes
3
  1. Use dynamic labels for all components, and use data editor logic to switch language based on user preference :slight_smile:
6 Likes
4

I had never thought of it and like approach 4 a lot.

Darren, would the setup you have in mind be as follows:

  • Language of preference in the User table
  • In other tables, display columns for language 1, language 2, etc.
  • If-Then-Else columns for each field and label of each component to display the language that matches the language of preference in the User table.

Approach 2 feels easier to maintain, though each change in the Layout Editor needs to be performed as many times as available languages. Approach 4 is more elegant and maybe better for performance?

1 Like
5

I think I read somewhere that the easiest way to do it is using Weglot! You should be able to install Weglot and everything will be translated automatically! I am going to test it myself today as a I need an application in both German and English! :wink:

1 Like
6

I’d be curious to know if Weglot will translate everything in the app. And how would the language picker be implemented?

Whatever you manage to do, if you have the time please share here :pray:

7

Testing it out right now. I read it on the forum some months ago.

Here’s the link: Machine Translations with WeGlot
Here’s a youtube video explaining it: https://www.youtube.com/watch?v=Y_5MbmQMhFE

The language picker is not supported so you access the translated version through another URL. (of course you can add a button to your app which leads to the right language version)

Testing it out right now :wink:

8

Not exactly.
I’ve been using variations of this approach for about 3 years now, and the approach has evolved and been refined with each new App that I’ve implemented it in. The current approach works as follows:

  • I have a separate “Strings” table. This table has one row for each text snippet that is used anywhere in the App.
  • I have a JSON column that contains the translations for each supported language. It looks something like this:
{
  "translations": {
    "zh": "输入总工作时间",
    "ms": "Masukkan Jumlah Jam bekerja",
    "ta": "வேலை செய்த மொத்த நேரத்தை உள்ளிடவும்"
  }
}
  • I use a JavaScript column to extract the appropriate translated value, based on the Users preferred language, which is stored in the User Profile.
  • In my User Profile table, I create a series of Single Value columns - one for each row in my Strings table. Each one takes N from start from the Strings table, beginning at zero.
  • I then reference those Single Value columns where ever I need them in component settings.

So a typical component configuration might look something like:

CleanShot 2023-09-21 at 17.20.48@2x
CleanShot 2023-09-21 at 17.20.48@2x962×912 49 KB

In the above example, each of the Field Component Labels (and the Title) takes a value from User Profile → s/number

The most tedious part is creating all the Single Value columns in the User Profile (I have one App that has almost 300 of them), but the naming convention that I use makes it pretty easy to quickly duplicate/edit/save. And once it’s done, it’s very easy to manage.

You might ask the question - why not use an integration to dynamically translate on the fly? I have done this in one App, using Google Translate, and the cost skyrocketed. And because this is all static text that never changes, dynamic translation is really overkill.

2 Likes
9

Thank you, Nathanael, I appreciate your response. I will explore these options :pray:

10

Thanks Nathan, I will take a look :pray:

11

Thank you Darren, much appreciated :pray:

12

Can you share the JS code you used? If you can share, thank you very much. :pray::pray:

13

To extract the required language string?

It’s quite simple:

const json = JSON.parse(p1);
return json.translations[p2];

p1 is the JSON string
p2 is the Users preferred language

Note that JavaScript isn’t actually required. The same thing could be done with the new Query JSON column.

3 Likes
14

Would be cool if you could make a simple public template with how you use translation? :wink:

1 Like
15

I made a little video & explanation because I have seen this question a lot before and because it was so easy to do with my app (just did it in 5 minutes) I think this might be one of the best ways to translate apps! :wink:

5 Likes
16

Yeah, that’s occurred to me. Something for a rainy day :slight_smile:

1 Like
17

Holy shit Darren, this is an awesome solution!

1 Like
18

Hey, @Darren_Murphy

It’s been a year since you posted this awesome tip on multilingual app. Has it changed since then?

Building my own app now and trying to find solution to not add hundreds of columns, but seems like it is still impossible to do localization without them

19

I still do it the same way that I described above.
Have you explored the option that @Flowcode posted?

1 Like
20

Great, thank you!

I thought about weglot and also translating with Glide AI on the fly, but I have only 3 languages and there is no need to make an automated translation, actually. Just wanted to have the most optimized solution for manual translation)