Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,366,822
Community Members
 
Community Events
168
Community Groups

i18n support in React for Jira Server / Data Center apps

Hello!

In this article I will show how you can setup i18n support in React for Jira Server / Data Center apps.

I will base my code on the code which I wrote in my previous article about React and Atlaskit for Jira Server / Data Center apps.

So what do we want to accomplish?

When you create a Jira Server / Data Center app you have property files which contain messages which can be translated to any language which you chose in Jira.

If you want to have translation in vm or soy templates or javascript you can use the following notation:

$i18n.getText("com.example.plugin.fruit.basket.contains", [$fruits.size()])

You can read more information about internalisation here.

If you use React you will not be able to use this notation by default.

I will show you what should be done in React to make it work.

What to do?

Let 's have a look at the screen which is called from the Form menu:

Screenshot 2020-09-17 at 21.35.36.png

We want the First name field be called First Name in English and Имя in Russian.

Change previous app

First we need add @atlassian/wrm-react-i18n dependency to frontend/package.json:

"@atlassian/wrm-react-i18n": "^0.7.0",

Then we add a message for the First name field into backend/src/main/resources/jira-react-atlaskit.properties:

first.name.label=First Name

Now we have to change code in frontend/src/js/components/Form.js.

First add import of i18n from the wrm-react-i18n package:

import { I18n } from '@atlassian/wrm-react-i18n';

Then use it for the First Name field:

<Field name="firstname" defaultValue="" label={I18n.getText('first.name.label')} isRequired>

As you can see we used I18n.getText() to get a message from the property file.

Now let's have a look what we have:

Screenshot 2020-09-17 at 21.46.44.png

As you can see we have the First Name label from the property file.

Now let's add a new property file for the Russian language.

backend/src/main/resources/jira-react-atlaskit_ru_Ru.properties:

#put any key/value pairs here
first.name.label=Имя

Let's package our app and change the language for my user to Russian :

Screenshot 2020-09-17 at 21.50.32.png

Now let's open our Form menu:

Screenshot 2020-09-17 at 21.51.24.png

Everything works! We did it.

You can take source code from here.

1 comment

M Amine Community Leader Jun 04, 2021

Good informations, thank you @Alexey Matveev _Appfire_ 

Comment

Log in or Sign up to comment
TAGS

Atlassian Community Events