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

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

Mohammed Amine Community Leader Jun 04, 2021

Good informations, thank you @Alexey Matveev _Appfire_ 

Comment

Log in or Sign up to comment
TAGS
Community showcase
Published in Apps & Integrations

🍻🍂Apptoberfest Update: Upcoming Virtual Events 🎉

Hello Community! I hope you've been enjoying the 🍂Apptoberfestivities🍂 (I know I have!) The event is heating up next week with a series of virtual events that we're calling the 🍻🍂Partner App ...

456 views 5 18
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you