Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

i18n support in React for Jira Server / Data Center apps


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/ 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('')} 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.


#put any key/value pairs hereИмя

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


Log in or Sign up to comment
M Amine
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
June 4, 2021

Good informations, thank you @Alexey Matveev 

AUG Leaders

Atlassian Community Events