Tips and tricks #2: How to make calculator translatable into different languages

This article describes the process of adding translation support to the calculator, so it can be translated into different languages.

Diese Webseite exisiert dank der Arbeit von den folgenden Menschen:



Erstellt: 2017-01-09 11:39:05, Letzte Aktualisierung: 2022-04-20 10:30:29

Tips and tricks series

This article may rely on knowledge you should get from previous articles, so you may want to check them first.

Hello, world! Now with languages support

Let's look again at the code of our "Hello, world" calculator.

message.SetValue("Hello, " + username + "!");

You can notice that string "Hello, " is hardcoded, which will pose the problem when this calculator will be translated into different languages (at the moment, there are Spanish and Russian versions of the site). In order to support translation, all hardcoded strings should be moved into translatable resources, making calculator localizable.

Go to calculator editor, then hover Input button and click on Add input parameter menu item. This will bring up the input editor dialog. Fill it like this:

Field name Value Meaning
Name Resources In the case of resources, the name is not displayed on the form, so you can enter just anything
Variable resources Name of Javascript variable, which is used to hold resource values
Description Optional. If set, it is used to provide a help message when the mouse is over the field label. Leave it blank
Type Resources The type of the input (in broad sense). The type also determines the lower part of the input editor form. Here set it to Resources

When you change the input type to resources, the lower part of dialog will change to list items editor. Fill list items editor Value field with hello, Display name field with Hello, and press Add button. Note that this item is now added to the list below.

Leave all other fields with their default values and press OK.

Note how the Calculate function signature was updated. Now it has resources variable, and by clicking on it, you can open input editor dialog again, if you need to. resources variable is just an object with named fields. To use it in the calculator, replace the current code with the following:

message.SetValue(resources.hello + username + "!");

Click on the Preview button. Inspect calculator in the Preview mode - it should behave just like before.

Is it good? Not quite. What if in the future site will have another language, which is read from right to left? Current version assumes that username is always on the right from "hello", which could be wrong. Let's quickly enhance it.
Open input editor for resources by clicking resources in Calculate function signature above the code. Click on the "Hello, " item and edit it to be "Hello, %username%!", then press Save and Ok to close the editor.

Replace code once again with the following:

message.SetValue(resources.hello.replace('%username%', username));

This way message is independent of the word's order. Click on the Preview button. Inspect calculator in the Preview mode - again, it should behave just like before. Click on the Publish button to republish it. Now it is localizable and is ready for translation.

Translating calculator

Let's translate the calculator into Spanish. Go to calculator editor and change language of the site to Spanish. You will receive the following message with the link: Este contenido se encuentra disponible en English. Aquí puede editar una traducción de English a Español

Clicking the link will bring you to the translation editor. It lists all translatable resources for the calculator, including inputs and outputs, and lets you translate them. Fill it like this:

Field name Value Meaning
Nombre ¡Hola Mundo! Ahora con soporte de idiomas Name of the calculator in Spanish. I hope Google translator gets it right)
Entradas Inputs part
Nombre Recursos Name for resources input. Note that original English value listed directly under control
Valor predeterminado 0 If the original English value is not empty, you have to fill it with something
Visualizar Nombre hello Hola, %username%! We should keep our identifier which is used for username replacement
Nombre Introduzca su nombre Other inputs should be translated as well
Valor predeterminado Juan Possibly with their default values
Salidas Outputs part
Nombre Mensaje Outputs, of course, also should be translated

Leave all other fields blank and press Guardar. If all non-empty resources were translated, you will see Publicar button. Press it to publish your calculator in Spanish.
I embed it in this article below, but note that until this article itself is translated into Spanish, calculator will be presented in English.
If you want to see it in Spanish now, go to calculator page Hello, world! Now with languages support, and then change site language to Spanish.

PLANETCALC, Hello, world! Now with languages support

Hello, world! Now with languages support


URL zum Clipboard kopiert
PLANETCALC, Tips and tricks #2: How to make calculator translatable into different languages