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
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Using i18n dictionary with React SPA in AEM 6.5

ndoz
Level 1
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.

AEM i18n React SPA
1 Accepted Solution
Dipti_Chauhan
Correct answer by
Community Advisor
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
Dipti_Chauhan
Correct answer by
Community Advisor
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

ndoz
Level 1
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.