Pushing Podio

Going Multi-Lingual

Once in a while, you'll need to build a mini app that's multi-lingual. This is not simple, but easily done.

First, make sure you do NOT provide a translation table in the app settings.

Next, I'll walk you through using behaviours and events to set this up.

1) Provide a Menu

The first thing we need to do, is to give the user a mechanism to change languages. To keep it simple, we'll just add an option to the app header, with links for "en" (English), and "de" (German).

This is just using mark-down, and knowing the homepage. This app has a custom URL of "vendor-invoices", so the code is:

[en](/vendor-invoices?lang=en) [de](/vendor-invoices?lang=de)

So we're passing the lang URL parameter with "en" or "de".

2) Capturing the Language Change

Now that the user can click a link to change the language, we need to capture this event. In the app's "Before Process" event, we'll inspect the url_parameters variable for the lang option, and set the app's translations, as well as our own variables to translate some other things.

There are 3 things we're changing here:

  1. The translations variable. Changing this is like setting translations in the app settings. It affects general app elements like messages, buttons, etc.
  1. txl_form is our own variable which we'll use later to translate form labels on detail screens.
  1. txl_table is our own variable which we'll use later to translate table headings.

Here's the code:

if ( url_parameters.lang == "de" ) {
  // set in-app translations
  translations = {"No Data to show":"Keine Daten zum Anzeigen", "Error":"Fehler", "Files":"Dateien", "Attach Files":"Dateien anhängen", "Save":"Speichern", "Cancel":"Abbrechen", "Back":"Zurück", "Submit":"Einreichen", "Delete":"Löschen", "Search":"Suchen", "Go":"Laufen"}
  // set form label translations
  my_variables.txl_form = {"Invoice Number":"Rechnungsnummer", "Vendor":"Verkäufer", "Date":"Datum", "Status":"Status", "Amount":"Menge", "Description":"Beschreibung"}
  my_variables.txl_table = {"invoice_number":"Rechnungsnummer", "date":"Datum", "Status":"Status", "amount":"Menge"}

if ( url_parameters.lang == "en" ) {
  // reset to english
  translations = {}
  my_variables.txl_form = {}
  my_variables.txl_table = {"invoice_number":"Invoice Number", "date":"Date", "Status":"Status", "amount":"Amount"}

Note that you'll need to adjust the translation objects to your own situation. The format of each key:value pair in the object is: text-as-displayed-normally:text-you-want-changed-to

They're always replaced in order, so keep complex strings near the top, and more simpler ones near the bottom to prevent replacement failures.

App Translation Settings

The standard app elements are translated simply by you having changed the translations variable above. Nothing further needs to be done.

Translating Table Views

In your summary tables, you'll need to add JavaScript code on the "On Render" event in the Behaviours tab to replace your headings for you:

Here's the code I used for a MySQL summary table:

var txl = my_variables.txl_table||{};
  for ( key in txl ) {
    if ( $(this).text() == key ) $(this).text(txl[key]);

Translating Forms

On your detail forms, you'll also need to add JavaScript code on the "On Render" event in the Behaviours tab to replace your headings for you:

Here's that code:

var txl = my_variables.txl_form||{};
  for ( key in txl ) {
    if ( $(this).text() == key ) $(this).text(txl[key]);

Quick Showcase

Here's what the above has achieved:

Further Enhancements

Note that most of this was done simply with JavaScript replacing text and a little ProcScript to set the translation text objects.

Since it's just JavaScript, it's easy enough to extend this to other areas.

For example, you may want to replace category field values, etc.

It's all possible if you know a bit of code.

Note: We do not support coding principles. It is expected that you know at least the basics of writing JavaScript and PHP code. We're here to help if you have issues with how to apply concepts specifically to Mini Apps, but for help with generic JavaScript and PHP, we'd recommend looking at StackOverflow or similar.

(c) 2020 Globi Web Solutions | Join the Discussion in our Podio Workspace.