Translating Dialog content in Cloud version using i18n

[mbezerrs]

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 

[Shashi_Mulugu · Accepted solution]

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

[mbezerrs]

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'}"

[Shashi_Mulugu]

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

[mbezerrs]

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>   ​

[pulkitvashisth]

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

[arunpatidar]

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.

[MayurSatav]

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