Using i18n dictionary with React SPA in AEM 6.5 | Community
Skip to main content
N
ndoz
June 17, 2021
Solved

Using i18n dictionary with React SPA in AEM 6.5

  • June 17, 2021
  • 3 replies
  • 3578 views

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/spa-editor/react/custom-component.html?lang=en

 

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Dipti_Chauhan

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

3 replies

Dipti_Chauhan
Community Advisor
Dipti_ChauhanCommunity AdvisorAccepted solution
Community Advisor
June 18, 2021

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

    N
    ndozAuthor
    June 24, 2021

    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.

    Vijayalakshmi_S
    Vijayalakshmi_S
    Level 10
    June 18, 2021

    Hi @ndoz,

    Here is an option from Sling Model, making use of ACS commons I18n Sling Models Injector - https://adobe-consulting-services.github.io/acs-aem-commons/features/sling-model-injectors/i18n/index.html

     

     

      W
      wordy22smith
      December 21, 2022

      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

      Terms & ConditionsAccessibility statement

      Loading footer...