AEM 6.2 : i18n Translation is not working in Touch UI

[Aby_Varghese]

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.

[Techaspect_Solu]

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

[Aby_Varghese]

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.

Classic UI Dialogue [which is working as expected]

[Techaspect_Solu · Accepted solution]

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.

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.

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

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