Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Translating Dialog content in Cloud version using i18n

Avatar

Level 2
Greetings everyone,

See if you can help me with a question.

I work on a project that requires the implementation of a multilingual website.

We are working with AEM as a Cloud Service (AEMaaCS).

In this case, the client does not want to hire Microsoft's translation service.

So, we implemented the i18n dictionary as part of the code, this being the best practice dictated by Adobe in the Cloud version.

So far, we have managed to translate only the content that is in HardCode, dialog content is not translated, even though it is exactly as in the dictionary.

We are using core components without access to dialog.xml
How should I implement to translate the content of dialogs in the Cloud version, would using the Microsoft API be the only way? Thanks!

We are using core components without access to dialog.xml 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@mbezerrs dialog content is not subjected i18n dictionary translation,  but if you want to use i18n dictionary translation while rendering the content stored in aem authored via dialog, you use sightly/htl you leverage i18n and then display translated content..

View solution in original post

7 Replies

Avatar

Correct answer by
Community Advisor

@mbezerrs dialog content is not subjected i18n dictionary translation,  but if you want to use i18n dictionary translation while rendering the content stored in aem authored via dialog, you use sightly/htl you leverage i18n and then display translated content..

Avatar

Level 2

but, if I don't have access to dialog.xml because we are using core components, the only way would be to extend the component and add the key to the fieldLabel?

fieldLabel="${'i18n' @ i18nKey='yourText'}"

Avatar

Community Advisor

@mbezerrs for dialog labels, you can use something Iike it, but not for fields values, authors keying, inside your dialog or when they open this dialog in language/local site structures..

Avatar

Level 2

I extended the core text component and created a dialog to add the i18n key value.
 
 

 

<fieldset
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Configuração"
                        sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                        <items jcr:primaryType="nt:unstructured">
                            <i18nKey
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldLabel="Chave i18n"
                                fieldDescription="Insira a chave i18n para o texto."
                                name="./i18nKey"
                                required="{Boolean}true" />
                        </items>
                    </fieldset>




  <span>${properties.i18nKey @ i18n}</span>   ​

 

Avatar

Community Advisor

Hi @mbezerrs 
1. The best way to translate would be to extend the core component dialog xml and override the field labels by leveraging the i18n context (Like you have mentioned fieldLabel="${'i18n' @ i18nKey='yourText'}" )
2. Also for field values best approach is to use labels instead of values , just like fieldLabel translations, but that is only the option for fixed value set fields.
3. For dynamic field values you'll have to go for AEM Translation Framework 
that allows you to define translation jobs and leverage translation providers (there are options to choose from, and as per documentation Microsoft Translator is pre-installed in AEM).

Avatar

Community Advisor

Hi @mbezerrs 
If you want to use the translation for dialog then you need to use i18n keys for labels or description instead of plain text.
You need to create keys with exact text that is used in core component and it will automatically find the keys and change it.

Please test this by changing language for user's preference.

 

No need to override the core components.

 



Arun Patidar

Avatar

Community Advisor

@mbezerrs , Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.