Page Comparison

...

Locales files are located in the files public/locales/{localeid}/translation.json where {localeid} is the name of any locale (it, fr, en, …). Files look like this:

...

Translating a new string

Let say we want to add the String “Welcome to Datafari” in the top menu of DatafariUI. We also want this String to be translated to French and German if those are the selected languages, else it should appear in English.

To do so, there are a few steps to follow:

1. Modify the top bar component to add the String calling the translation function

2. Adding the translations to the French and German localization files

3. Compiling DatafariUI

Modifying the top bar component

The top bar component is defined in src/Components/TopMenu/TopMenu.js.

Within the return statement (which returns the definition of what will be displayed in JSX) we need to add our String where we want it to appear.

Within the Toolbar element, after the NavLink containing the logo, there is a div currently displaying Datafari. We will change that.

It looks like:

<>
      <AppBar position="static" elevation={0}>
        <Toolbar>
          <NavLink to="/search" className={classes.logo}>
            <img
              src={`${process.env.PUBLIC_URL}/images/logo.png`}
              alt="logo"
              style={{ height: '50px' }}
            />
          </NavLink>
          <div className={classes.title}>
            <Typography variant="h6" noWrap>
              Datafari
            </Typography>
          </div>

See line 13 of this snippet the “Datafari” String, we will change that to “Welcome to Datafari”. But as we want it to be translated when the user changes the language setting, we need to use the translation function t.

This function is already imported in this component as it is used is other places, so no need to worry about that here. If it is not imported in the component you want to modify, refer to the example above to see how to import it.

After modification, the snippet looks like the following:

<>
      <AppBar position="static" elevation={0}>
        <Toolbar>
          <NavLink to="/search" className={classes.logo}>
            <img
              src={`${process.env.PUBLIC_URL}/images/logo.png`}
              alt="logo"
              style={{ height: '50px' }}
            />
          </NavLink>
          <div className={classes.title}>
            <Typography variant="h6" noWrap>
              {t('Welcome to Datafari')}
            </Typography>
          </div>

Adding the translations to the localization files

The function argument is the English version of the text, so adding a translation to the English localization file is not necessary. However, it is still a good habit to create it. We will also add the French and German translations.

Localization files are named translation.json and are located in the folders public/locales/{localid}.

For our needs, we will modify public/locales/en/translation.json, public/locales/fr/translation.json and public/locales/de/translation.json.

I show below only snippet of the files with the added key “Welcome to Datafari”:

en

  "or any means": "or any means",
  "title": "title",
  "url": "url",
  "Welcome to Datafari": "Welcome to Datafari"
}

fr

  "or any means": "ou tout autre moyen",
  "title": "titre",
  "url": "url",
  "Welcome to Datafari": "Bienvenu sur Datafari"
}

de

  "less than a month": "Weniger als 1 Monat",
  "less than a year": "Weniger als 1 Jahr",
  "less than five years": "Weniger als 5 Jahre",
  "Welcome to Datafari": "Willkommen bei Datafari"
}

You can then build DatafariUI (React datafariUI: build, deploy and dev setups ) and deploy it with the new translated String.

Modifying a translated String in a deployed DatafariUI instance

If String already translated in DatafariUI end up being wrong for some reason, it is possible to correct them without rebuilding and deploying DatafariUI all over again.

To do so, you can access the translations file in the {DATAFARIUI_ROOT}/locales directory and modify the incorrect strings there.

The next time clients will load the interface, they will see the new translations.

For example, lets say I have a default installation of DatafariUI with my Datafari and I want the french translation for “Welcome to Datafari” to be “Bienvenue sur Datafari” because there was typo in the previous tutorial !

I can go ahead and modify the file /opt/datafari/www/locales/fr/translations.json and make it look like:

  "or any means": "ou tout autre moyen",
  "title": "titre",
  "url": "url",
  "Welcome to Datafari": "Bienvenue sur Datafari"
}

This will correct the typo for anyone accessing my instance of DatafariUI (letting the dev team know so that they can correct in the code would be great too !)