i18n implementation for dialog's value | Community
Skip to main content
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 HrishikeshKagne

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/components/internationalization/i18n-dev
    https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/components/internationalization/i18n

2 replies

DPrakashRaj
Community Advisor
Community Advisor
April 17, 2024

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/introduction/translation#:~:text=To%20automate%20translation%20workflows%2C%20you,and%20translated%20by%20professional%20translators.

HrishikeshKagne
Community Advisor
HrishikeshKagneCommunity AdvisorAccepted solution
Community Advisor
May 5, 2024

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/components/internationalization/i18n-dev
    https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/components/internationalization/i18n
Hrishikesh Kagane