Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Using i18n dictionary with React SPA in AEM 6.5

Avatar

Level 1

I am building a React SPA in AEM 6.5.8 and can't figure out how to get i18n translations into the React components. We are able to receive the AEM dialog content as props by using the method described here:

 

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

 

Is there a way to receive translations from the dictionary as props to a React component in AEM? Or is there another best practice way to do it? I can't find any information on the Adobe site.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @ndoz 

 Did you try using i18n client side library  Granite.i18n.get(key) ?

e.g

// Set locate first 

window.Granite.I18n.setLocale("SET LOCATE HERE");
// get I18n Key 

getI18keyText: (key) => {
if (key && window.Granite && window.Granite.I18n) {
return window.Granite.I18n.get(key);
}
return key;
},

 

Thanks

Dipti

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @ndoz 

 Did you try using i18n client side library  Granite.i18n.get(key) ?

e.g

// Set locate first 

window.Granite.I18n.setLocale("SET LOCATE HERE");
// get I18n Key 

getI18keyText: (key) => {
if (key && window.Granite && window.Granite.I18n) {
return window.Granite.I18n.get(key);
}
return key;
},

 

Thanks

Dipti

Avatar

Level 1

Thanks @Dipti_Chauhan - I was able to get this to work.

 

For anyone else having this same issue I had to follow these steps.......

 

1. Update the spa-page-template to include the granite.ui.foundation clientlib. This is located under page properties -> properties -> client libraries

2. for development, update the index.html file that contains your React application to manually include the Granite clientlibs. Under ui.frontend/public/index.html add the following........

 <script src="/etc.clientlibs/clientlibs/granite/uritemplate.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/jquery.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/utils.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/jquery/granite.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/coralui2keys.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/typekit.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/moment.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/coralui3.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/coralui2.js"></script>
        <script src="/etc.clientlibs/granite/ui/components/coral/foundation/components/clientlibs/components.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/history.js"></script>
        <script src="/etc.clientlibs/granite/ui/components/coral/foundation/clientlibs/foundation.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/jquery/animation.js"></script>
        <script src="/etc.clientlibs/granite/ui/clientlibs/quickactions.js"></script>
        <script src="/etc.clientlibs/granite/ui/components/endor/clientlibs.js"></script>
        <script src="/etc.clientlibs/granite/ui/components/foundation/clientlibs/foundation.js"></script>

 

With those two updates, Dipti's code works both inside and outside AEM and in both Author and Publisher.