Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
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

4 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.

Avatar

Level 1

Having implemented many websites in AEM at different organisations I would say the limitation on AEM is mostly on the organisation implementing it, due to not having the capacity (read: people and skills) to fully utilize its powerful features.

AEM is part of Adobe’s Marketing Cloud and is pitched as such. It involves a lot of highly specialized marketing tools, some of which require a lot of expertise to work with.

The CMS functionality is pretty straightforward, but to start using targeting, analytics, running campaigns, multisite with translations is a whole different ball game. Marketing departments are usually not ready to “go digital” in this area, lacking training and experience in various degrees. React