Get reference code
Appearance
Sample
Tips and tricks #2: How to make calculator translatable into different languages

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.
Timur2017-01-09 11:39:05

Tips and tricks series

Tips and tricks #1: How to set output value

Tips and tricks #3: How to make calculator with custom errors

Tips and tricks #4: How to make calculator with table output

Tips and tricks #5: How to show/hide input and output controls in a calculator

This article continues development of calculator started in Tips and tricks #1: How to set output value, so you may want to check it 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 case of resources, 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 help message when mouse is over the field label. Leave it blank
Type Resources The type of the input (in broad sense). 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 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 object with named fields. To use it in calculator, replace current code with the following:

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

Click on 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 "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 from word's order. Click on Preview button. Inspect calculator in the Preview mode - again, it should behave just like before. Click on 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 translation editor. It lists all translatable resources for the calculator, including inputs and outputs and let 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 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.

Hello, world! Now with languages supportCreative Commons Attribution/Share-Alike License 3.0 (Unported)
 

Request a calculator
View all calculators
(477 calculators in total. )

Comments