As an Author, at some point, you must have felt the agony of not having the language support other than English in the component’s fields. This becomes even more dire for the multinational organizations who have regional authors. Realizing this, AEM has come up with a unique feature ‘i18n’, enabling Internationalization of components and dialog’s so that the UI strings can be presented in different languages. Components that are designed for internationalization enable UI strings to be externalized, translated, then imported to the repository and on the basis of the user’s preference, the displayed language in the UI is determined. It’s worth mentioning that it has been named “i18n” because there are 18 characters between ‘I’ and ‘N’ in the word ‘INTERNATIONALIZATION’.
Developers at NextRow Digital has used this ‘i18n’ feature to change the component’s fields and the same is being presented below in the form of use-case to understand the enablement of the ‘i18n’ in AEM more profoundly.
Here, we want to add multiple languages to title and description component.
Step 1: Navigate to the component path which you want to be multilingual.
Step 2: Create a folder named ‘i18n’ under the component (here, it is ‘titleanddescription‘).
Step 3: Create a folder with name as language code (ISO code). For ex: En for English, de for German, for for French etc.
Step 4: Click on the ‘Mixins’ from the tool bar.
Step 5: Click on ‘+’ button in Mixins window and add ‘mix:language’ property and after that Click ‘OK’.
Step 6: Add ‘jcr:language’ property to the same ‘en’ node. And it’s value is the language code (ex: en)
Step 7: Create two nodes under ‘en’ node of type ‘sling:messageEntry’. Names of the nodes can be anything (preferably keep the FieldLabel names of the dialog), and later on we will use this same Name for configuring the component’s dialog.
In this case, I have created ‘training.title’ and ‘training.description’ to give more sense to the names because my component has two fields ‘title’ and ‘description’.
Step 8: Add ‘sling:message’ property with value. To recall, the value of respective language depends on the language node that you are in.
Here, as we are in ‘en’ node, writing the value as ‘Description’ in English. See below images for more understanding.
Here, I am in German(de) node. So, the value has ‘Description’ as ‘Beschreibung.
Step 9: Similarly, create the same folder structure from Step 6 to Step 8 for all the languages that you want to have for the component.
Step 10: Navigate to the component’s dialog fields and add values to the ‘fieldLabel’ property. Values are the node names under language folder.
Step 11: Navigate to the User Admin page(‘http://localhost:4502/useradmin’).
Search for the username for which you are logged in ( by default it is ‘admin’). Click on the Preferences tab and select the language from the drop-down that you want the component to be displayed in.
Step 12: Navigate to the page where your component is authored and click on ‘edit’ and here you can see that the field names are displayed in the language you have selected in user preferences. Here, I have selected display language as ‘French’.
Above, we have just presented a simple use case to understand working process of i18n (Internationalization) for AEM. Apart from this the ‘i18n’ can also be used by multi-national multi-lingual websites. These websites often use translation vendor for a page translation and they pay the vendors on the basis of word-by-word. In multi-national multi-lingual websites, there are always some labels/text-strings which remain same and because of this, it doesn’t make sense to have them translated with a translation vendor every time they send a page for translation. To tackle this issue of those websites, the AEM provides a separate in-built ‘i18n’ translator tool, where all these labels/text-strings and their translated content is stored and can be used as many times as required (Of course, without any payment). In conclusion, we can say that i18n is a powerful, versatile tool that comes with AEM to Internationalize your components and dialogs to display UI strings in different languages. If you have any query then do let us know, we would be more than happy to help.
NextRow Digital is a new age digital agency & an Adobe Business Solution Partner with many third party and Adobe Marketing Cloud implementations under its belt. For the years we have helped our clients meet their business needs successfully to overcome the challenges of digital transformation. To know more about us, visit our website. And if you require any of our services then let us know by sending mail at sales@nextrow.com or call directly and have a chat with our expert 1-847-464-8091.
