Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM 6.2 : i18n Translation is not working in Touch UI

Avatar

Level 1

Hi Everyone,

I am trying to implement i18n for Touch UI components.

I have followed steps mentioned in Multilingual component dialog

It is working fine with Classic UI (cf#). But not working for Touch UI.

One strange point is that, response for "Granite.I18n.getLocale()" in web console always shows "en" if the selector "editor.html" or "cf#" is present. Otherwise it will show the correct locale.

Translation is working perfectly in Sightly, jsp and WcmUsePojo.

I tried javascript "Granite.I18n.setLocale(<lag code>) also but no difference!!

Any helps to resolve this issue will be really helpful.

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hi,

We were able to implement i18n and display dialogue field labels in different languages successfully. Please follow the steps below to display your dialogue field labels in different languages:

1. Inside your component folder, create the i18n sling folder. Then create language folders (nt:folder) under your i18n folder and assign Mixins of type mix:language. In the language folder, add the jcr:language property and assign the language code (for example - en, de etc.).

2. In each language folder, create a node of sling:MessageEntry type and add properties - sling:key and sling:message as shown in the below screenshot.

i18n-folder.png

3. After you are done with creating MessageEntry nodes for all the strings that you have in the component, go to the items in the dialog node, and change the fieldLabel value to the sling:key value you defined in the language node as shown in the below screenshot.

fieldLabel.png

NOTE: To test this, go to http://localhost:<port-no>/useradmin, select the user. In the Preferences tab, change the language to the language of your choice (say "de" here).

You'll be able to see the component in German as displayed below (Sample output):

i18n.png

For more details, please refer:

http://blogs.adobe.com/sunil/2013/07/25/translating-strings-in-a-cq-component-to-users-preferred-lan...

We hope this helps!

Regards,

TechAspect Solutions

View solution in original post

3 Replies

Avatar

Level 7

Hi,

We were able to implement i18n for touch UI components in AEM 6.2 successfully. Please go through the below working code which might help you in implementing i18n.

Note: Please follow the steps from link below to create a dictionary:

https://helpx.adobe.com/experience-manager/6-2/sites/developing/using/i18n-translator.html

The sample js code for making ajax call to a servlet, which returns text in different languages based on locale is:

$(function() {

//let sample path be: http://localhost:4518/editor.html/content/<your-project>/test/de/test-page.html

var url =window.location.pathname; // url: /content/<your-project>/test/de/test-page.html

var locale;

        locale = url.split("/")[4]; // sample locale: de (from above sample url)

var readmoremsg;

    var readMoreLink = {

        readMoreLink:function(){

            var message = 'read-more-airmini';

            $.ajax({

                url:"/bin/test/message?message="+message+"&locale="+locale,

                type: "GET",

                success:function(response) {

                    readmoremsg = response.message;                

                },

                error:function(error){

                    return error;          

                }

            });

        }

    }

});

Note: window.location.pathname in the above code returns the path and filename of the current page.

Servlet code:

@SlingServlet(paths = "/bin/test/Message", methods = "GET")

public class Messages extends SlingAllMethodsServlet {

private static final long serialVersionUID = 2598426539166789515L;

private static final Logger LOGGER = LoggerFactory.getLogger(Messages.class);

protected void doGet(SlingHttpServletRequest slingRequest, SlingHttpServletResponse slingResponse) {

JSONObject jsonObject = new JSONObject();

try {

String loc = null;

if(slingRequest.getParameter(Constants.LOCALE) == null){

loc = "en";

}

Locale locale = new Locale(loc);

ResourceBundle resourceBundle = slingRequest.getResourceBundle(locale);

I18n i18n = new I18n(resourceBundle);

String message = i18n.get(slingRequest.getParameter("message"));

jsonObject.put("message",message);

slingResponse.setContentType("application/json");

slingResponse.setCharacterEncoding("UTF-8");

slingResponse.getWriter().write(jsonObject.toString());

} catch (IOException e) {

LOGGER.error(e.getMessage(), e);

} catch (JSONException e) {

LOGGER.error(e.getMessage(), e);

}

}

}

We hope this information helps!

Regards,

TechAspect Solutions

Avatar

Level 1

Thanks for the detailed response.

I am looking for a solution to display dialogue field labels in different languages.

Here attached the screenshot of both touch and classic dialogue, where touch UI shows message without translation.

classicui.png

Classic UI Dialogue [which is working as expected]

touchui.png

Avatar

Correct answer by
Level 7

Hi,

We were able to implement i18n and display dialogue field labels in different languages successfully. Please follow the steps below to display your dialogue field labels in different languages:

1. Inside your component folder, create the i18n sling folder. Then create language folders (nt:folder) under your i18n folder and assign Mixins of type mix:language. In the language folder, add the jcr:language property and assign the language code (for example - en, de etc.).

2. In each language folder, create a node of sling:MessageEntry type and add properties - sling:key and sling:message as shown in the below screenshot.

i18n-folder.png

3. After you are done with creating MessageEntry nodes for all the strings that you have in the component, go to the items in the dialog node, and change the fieldLabel value to the sling:key value you defined in the language node as shown in the below screenshot.

fieldLabel.png

NOTE: To test this, go to http://localhost:<port-no>/useradmin, select the user. In the Preferences tab, change the language to the language of your choice (say "de" here).

You'll be able to see the component in German as displayed below (Sample output):

i18n.png

For more details, please refer:

http://blogs.adobe.com/sunil/2013/07/25/translating-strings-in-a-cq-component-to-users-preferred-lan...

We hope this helps!

Regards,

TechAspect Solutions