Internationalization in Forge Custom UI App

Forge
1

Hi Colleagues,

Can you advise if there is a possibility to use native Atlassian ecosystem localization resources (word and sentence dictionaries already translated to all languages, supported from this list: Manage your language preferences | Atlassian Support or something similar for this purpose) in Forge Custom UI App? Maybe I can use some standard internationalization REST API? I would like to avoid implementing internationalization from scratch using i18n or any other solution if I can use the ready-to-go Atlassian one.

2 Likes
2

See here Internationalization approach for Forge Apps? - #16 by Holger and here [FRGE-387] - Ecosystem Jira

2 Likes
3

Hi @Holger ,

Thank you for your answer!
Please correct me if I’m wrong, FRGE-387 is still deeply in backlog and not prioritized for delivery, and you haven’t got an answer on how to get access to

  • common.concepts.projectlead
  • admin.common.words.users
  • admin.viewuser.edit.project.roles
  • browseproject.and.x.more

resources to use internationalization from the Atlassian ecosystem?

4

I went here https://packages.atlassian.com/maven/com/atlassian/translations/ and downloaded the respective translations, unzip the jar file and copied from the properties file to my Forge i18n file.

5 Likes
5

Thank you very much, @Holger!
This is a big step ahead for me

6

Btw I am using then react-i18next within the Forge app.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import { view } from '@forge/bridge';

const context = await view.getContext();

const resources = {
  en: {
      translation: {
        "License": "Missing or expired license",
...

    }  
  }
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: context.locale,
    fallbackLng: "en_US",
    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

export default i18n;

And then in the Forge app

import { useTranslation } from 'react-i18next';
import './i18n';
...

const { t } = useTranslation();
...

<Banner appearance="warning">{t('License')}</Banner>
3 Likes