i18n implementation for dialog's value

[RinkiShahi]

Hi Everyone,

I am trying to implement internationalization i18n for dialog's user input.

Example for text component. I am only getting examples of fixed values

Any lead on how to do it for component user input will be helpful.

[DPrakashRaj]

I18N is not possible for components user input. For this you need language translation for your project. Follow this document to identify what’s suits your requirements https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/introdu....

[HrishikeshKa · Accepted solution]

Hi @RinkiShahi ,

To implement internationalization (i18n) for user input in AEM dialogs, you can follow these steps:

1. Define Translatable Labels: Define translatable labels for your dialog fields in the component's cq:dialog node. Instead of hardcoding the labels directly in the dialog XML, you can reference them using the i18n feature in AEM. For example:

<text
    jcr:primaryType="nt:unstructured"
    fieldLabel="${i18n('Label for Text Field')}"
    name="./textField"/>

1. Define the translatable labels in the i18n folder of your project's apps folder. Each language should have its own properties file (<language_code>.properties) containing the translations.

2. Create i18n Properties Files: In your project's apps folder, create an i18n folder if it doesn't exist. Inside the i18n folder, create properties files for each language you want to support (e.g., en.properties for English, fr.properties for French). In these properties files, define key-value pairs for each translatable label, like so:
   Label for Text Field=Enter text here

   1. Retrieve Translations: Ensure that your AEM project is set up to handle internationalization correctly. AEM automatically resolves the translations based on the current language/locale of the user. When the dialog is rendered, AEM will replace ${i18n('...')} with the corresponding translation from the properties files.

   2. Testing: Test the internationalization by changing the language settings in AEM or by setting the language preference in your browser. When the dialog is opened, the labels should be displayed in the selected language.

   By following these steps, you can implement internationalization for user input in AEM dialogs, allowing users to interact with your components in their preferred language.
   
   

   Reference:https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/com...
   https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/com...