Internationalization in Gluu Admin UI - GluuFederation/gluu-admin-ui GitHub Wiki

Overview

I18next is an internationalization framework used in Gluu Admin UI. At present, GUI is supporting English, French and Portuguese languages. We can include more languages by adding their translation files.

Adding new language support in Gluu Admin UI

To add new language support in Gluu Admin UI, we need to include its translation file (translation.json) containing all labels keys mapped with the translated text in JSON object.

  1. Check translation files here and create a new language translation file in the same JSON format.
  2. Create a new folder named with language code at ${GLUU_ADMIN_UI_PROJECT_DIR}/app/locales/ and add the translation file with .json extension into that folder. For example, if the Japanese language is added to Admin UI then translation.json need to be added at location ${GLUU_ADMIN_UI_PROJECT_DIR}/app/locales/ja
  3. Import the new language json file in i18n.js and add its entry in resources initialized by i18next. For example, changes done in i18n.js to add Japanese language support.
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'

import translationEn from './locales/en/translation.json'
import translationFr from './locales/fr/translation.json'
import translationPt from './locales/pt/translation.json'
import translationJa from './locales/ja/translation.json'

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: translationEn,
      },
      fr: {
        translation: translationFr,
      },
      pt: {
        translation: translationPt,
      },
      ja: {
        translation: translationJa,
      },
    },
    fallbackLng: 'en',
    debug: false,
    ns: ['translation'],
    defaultNS: 'translation',
    keySeparator: '.',
    react: {
      wait: true,
    },
  })
export default i18n

Adding translation feature to a page

  1. Import useTranslation hook.

import { useTranslation } from 'react-i18next'

  1. Get t function from useTranslation hook.

const { t } = useTranslation()

  1. Replace the hard coaded text with t function and passing label-key as parameter. All label-keys mapped with texts are present in translation.json.

{t('fields.choose')}

Note:

  1. The GluuLabel component has inbuilt translation support. So only label-key needs to be passed as label attribute and the component will take care of the label translation.

<GluuLabel label="fields.displayname"/>

  1. Tooltip feature in Gluu Admi UI has i18n support. Refer ToolTip wiki for details.