(Tip!) How I use translations both in backend and front-end with Xano and weweb

Right, so after starting to add locales to my project and translating static template text, I got to a point where I had to deal with text coming from the backend, in my case Xano. I wasn’t too sure how to handle translations - front-end or backend? There are some topics on the matter but nothing conclusive.
Unfortunately you can’t just have one json translation file with all the string translations the way I’m used to which makes adding new languages (especially with LLM’s) soooo much quicker.

Anyway, I’ve only recently discovered the translation() function in the formula’s and I wish I knew this sooner, it def changed my workflow so I thought I’d share! It’s basically made me decide to switch from front-end translations to back-end translations in the case of messages coming from the database. I’ll give examples:

Old situation:

A record gets added to my ‘notifications’ table that there’s a new message. The title of the message that Xano stores is “notif.new_message.title”. Then in my ‘title’ text element in weweb, I have a binding for each language, that is along the lines of: switch(message.title,”notif.new_message.title”,”You have a new message”,”notif.complete_profile”,”Please complete your profile”) etc etc. This could become a very long formula inside the tiny text field! And then you have to do the entire switch() formula for every case, in each language and make sure if you change one string, you find that string in all the other locales, etc etc. It’s quite a hassle.

New situation
Sooo as it turns out, there is a translate() function for your formulas and it works as such: if you put an object inside it that has translations, it will find the appropriate string for the locale that the user is on. So, I’ll give an example for an error message I send from xano to weweb from an api precondition:

As you can see, I’m adding the translated strings in the payload of the error. Then over in weweb, I just bind the same object in every locale as: translate(response.data.payload) and the formula searches the key of the current locale inside the object and outputs the correct string :slight_smile:

1 Like

Hi Niels :waving_hand:

Translation is definitely a recurring topic, and it usually ends up requiring much more work than people expect at the start of a project.​

That’s why it’s so great to see community members like you sharing their workflows.​

Thank you for this tip, it will be super helpful for anyone deciding between front-end and back-end translations.​

PS – Would love to see a more in-depth tutorial or video on how you implemented this approach. :wink:

hmm I just recorded a whole how-to in screen studio only to find out I couldn’t export it (and it’s damn expensive, haha). I’ll see what other free software I can use to re-record the tutorial!

1 Like

Hate it when that happens :sweat_smile:

Oh No Omg GIF by The Office