Translate the CommCare User Interface

About User Interface Translation

Even though you have built all of your forms in a language other than English, you may find that some parts of your application are still in English.  These text strings, which include the text for error messages, the log-in screen, and menu options, are called user interface strings.  It is possible to translate these yourself, or to use translations that other people have used for your language.

This page will walk you through the process of updating your application with translations of these "user interface" text strings.

When you are working on user interface translations, it is important to note in which language you are viewing your application. To find your language settings, go to the "Language" settings page, which is in the far left-hand pane in the "Application" tab.  For general information about multiple languages in CommCare see https://dimagi.atlassian.net/wiki/x/njTKfw.

If you are deploying your application in multiple languages, then you will need to add user interface translations for each language.

User Interface Translation for Your Application

1. Make sure you are viewing the application in the correct language, e.g. if you created an application in English and French and now want to update the User Interface in French, then you would first need to change the language setting from English to French 

Open

2. Select the "CommCare translations" button found on the "Languages" page in the settings section.  You should find a box that looks like this:

Open

Before you start, you should make sure that someone else has not done all the work for you already!

3. Press "auto fill translations"  after which CommCare will show you its best educated guess at the correct translation.  For example, if another organization made an application in the Thai language, then CommCare will auto fill the translations with any user interface translations that they used.  If you want, you can use those, or you can change them to whatever you want.  If ten organizations have made applications in the Thai language, then CommCare will look for the translations that are most common for each text string and will suggest those. The auto fill translations button exists underneath within the CommCare Translations section at the bottom of the phrase list. 

If your language has never been used in a CommCare application (or no user interface translations were provided) then nothing will happen.  If there are prior translations, you should see something like this (it may take up to a minute for the translations to appear):

On the left is the "key" that CommCare needs to know which message you are referring to, and on the right is the translated text that will be displayed to the user.  In the image above, CommCare is suggesting translations for some of the strings, based upon previous projects.

4. If you want to keep them, click on the green "Save" button in the upper right corner.  You can also directly edit the translations, delete ones you don't want (by clicking on the "x"), or add additional translations, which is explained below.

Adding New Translations

The link to library of supported keys for CommCare is hosted on Github. You will be opening a webpage with a long list of "keys" and English text which looks something like this:

It might look scary, but each row is simply:

This is the same as the user interface translation boxes we saw above.  The left box is for the key (i.e. "restore.message.connection.failed") and the right box is for the text to display (i.e. "Connection to server failed").

In this example I will add a translation to translate the message that shows in CommCare when a user tries to skip a required question: "Required question. Please answer it to continue."  

First, I open the CommCare library and searched the page for "required" in order to find the relevant key. Here is what I found:

I take the "key" to the left of the equals sign and put it in the left box of the user interface translation section (don't include the "="), and then the translation for "Required question. Please answer it to continue" into the right box:

I then click on the "+" sign next to the translation to add it to my list of translated strings.  Don't forget to save regularly.  If you want to remove a translation, just click on the "x" sign next to the line you wish to remove.

Editing User Interface Translations in Bulk

You can download all existing translations to excel.  Click the "Bulk Application Translations" link to expand this option.

Important Notes about User Interface Translations

• The "=" sign you see in the library does not need to be used in the user interface translation settings.

Android-Specific User Interface Translations

You can find the specific translations on hosted on GitHub.

Changing Submit/Continue buttons and End of Form Success Messages

This allows you to customize the names of submit, continue, and end of form messages. This can make your app more readable and make your app easier to navigate.

Steps to setup changing submit and end of form success messages

1. In your app’s settings, Download the bulk translation spreadsheet (tutorial above).

2. In the spreadsheet, Go to the page with the forms and/or case lists where changes are needed.

   1. The first page of the spreadsheet will show menus_and_forms to help navigate the spreadsheet.
      Find the button label that will be changed.

3. Find the button label that will be changed.

4. Change the default_en column to your new text that should display.

5. Save the Excel document.

6. In CommCare, Upload bulk translations translations.