Skip to main content

Internalization

HAPI Elements provides ways to add your own locales and translations or change existing ones.

What are supported locales out-of-the-box and how to add new locale(s) and translations?​

HAPI Elements out-of-the-box supports American English, Germany German, Netherlands Dutch & France French.


What are the supported locales by HAPI Backend and what are they?​

HAPI Backend supports American English, Germany German, Netherlands Dutch & France French locales in some areas:

  • Taxonomies like Job titles, job functions, locations and industries
  • Products in product search

It is currently not possible to translate into any other locale other than American English, Germany German, Netherlands Dutch & France French for values returned from HAPI Backend.


In these areas, HAPI Backend only supports American English:

  • Validation errors

In contract posting requirements (the requirements of the job form to be filled in by the user), HAPI Backend, most of the time, returns American English however for some job boards, the posting requirement labels and select options are returned in the locale of the job board.

Using locales supported by HAPI Backend​

You can use the object we have in Language module's utilities submodule called localeKeys to set the locale as such:

window.hapi.language.state.locale = window.hapi.language.utils.localeKeys.en // or .de or .nl or .fr

Adding unsupported locales​

To add more locales, you need to first get the JSON of translations and get it translated (or mapped to your own translations).


Get the JSON file that contains all translations via one of the following and then get it translated.:


Let's assume the file has been translated; here is an example translation file in Spain Spanish "es":

{
    "user-journey.landing.job-title": "Título Profesional",
    "user-journey.landing.job-title-explanation": "Ingrese y seleccione el título del trabajo que describe el rol (usado para seleccionar los canales con mejor desempeño)"
}

Let's add the new translations:

const esTranslations: Record<string, string> = {
    "user-journey.landing.job-title": "Título Profesional",
    "user-journey.landing.job-title-explanation": "Ingrese y seleccione el título del trabajo que describe el rol (usado para seleccionar los canales con mejor desempeño)"
}

window.hapi.language.state.translations = {
    ...window.hapi.language.state.translations.value, //keep this not to overwrite default English translations
    "es": esTranslations
}

We recommend using this approach so that in the future, if we add more locales, your code won't need to provide the translations:

cons ourTargetLocale = "es"

if (!window.hapi.language.utils.localesSupportedByBackend.includes(ourTargetLocale)) {
    window.hapi.language.state.translations = {
        ...window.hapi.language.state.translations.value, //keep this not to overwrite default English translations
        "es": esTranslations
    }
}

How to change the default locale (only if translations are provided)?​

window.hapi.language.state.locale = "es"

The app will now have the "es" translations applied.


In addition to executing the code mentioned above, we have a UI widget you can place within your app to change the locale if needed:

<he-ui-localeselector></he-ui-localeselector>

HAPI Elements will now show numbers (like currencies), dates & times in the correct format of the locale, a couple of examples:

  • 2/13/2023 (M/DD/YYYY) in English will be formatted as 13/2/2023 (DD/M/YYYY) in Spanish
  • €1000 in English will be formatted as 1000€ in Spanish
info

The keys of the "translations" object should adhere to ISO-639-1 standards.

info

HAPI Elements has no "locale" detection meaning that we don't set the default locale to the user's browser (navigator) locale. It is up to you to define the locale of your choice.

info

Even if you translate HAPI Elements into locales other than American English, Germany German, Netherlands Dutch & France French, HAPI Backend will still be sending American English values mentioned in What are the supported locales by HAPI Backend and what are they? section.

info

If a translation that you provided is missing, the default English translation will be used as the fallback.

note

HAPI Elements currently does not support right-to-left locales such as Arabic yet. Please get in touch with your Partner Account Manager to make a request for this feature.

How to find internalization keys within the application​

You can use the debug panel to enable language debugging to see the keys for translations instead of the actual text of the translation:


When turned on, the application will show the keys of the translations:


English (en-US) Translation file​

Loading...

German (de-DE) Translation file​

Loading...

Dutch (nl-NL) Translation file​

Loading...

French (fr-FR) Translation file​

Loading...