praffulljain

Customize languages in AEM 6.2

December 8, 2016praffulljain2 Comments

Adobe Experience Manager is completely flexible and can be configured for any language. AEM inherently understands all ISO language codes, both 2 letter locales (en, fr, de) as well as 5 letter locales (en-US, fr-FR, de-DE).
Language codes play most important role while you create and translate site in multiple languages. As per W3C standards, you should use dashes in the locale codes when they are part of the url structure, like de-de, fr-fr etc. For reference, see Language tags in HTML and XML.
In AEM 6.2 when you create language copies using the References Panel, you will be able to create sites with language codes that have dashes in the language codes. However, when you try to translate those pages using Translation Projects, you will not be able to create Translation Projects, if the language codes do not match the ones in the Translation Project.
Translation Projects in AEM come with a list of preconfigured languages and associated language codes, however these codes do not follow the W3C standards. If you are curious, you can find the list of languages here: /libs/wcm/core/resources/languages. If you wish to change this list, either for adding more languages or use W3C standard locales for the same languages, you would need to make modifications to this list. As we all know, we should never change anything under /libs. What we should instead do is, override the list in /apps.
In the following step by step procedure, I will walk you through how to override languages in AEM Projects.
Prerequisite:
Before we go ahead with the procedure, you will need to patch to AEM 6.2. Please download cq-6.2.0-hotfix-11808 from Package Share and install it in your instance.
OOTB languages in AEM Projects:
The list of available languages can be seen in the advanced properties tab of Translation Project.

As you would see, all the language codes are dashes.
We are going to make two changes:
Change underscores in language codes (de_de) to dashes (de-de)
Add an additional Indian language. We will add Punjabi (pa) a language commonly spoken here at our office.
Steps:

In order to make these changes, we will need to make changes in CRXDE.
Open up CRXDE (http://localhost:4502/crx/de/index.jsp) and then browse to /libs/wcm/core/resources/languages
Here you will see the list of languages that you see in the Translation Project. The language list is sorted by language code and not language name.
Please note: DO NOT MAKE CHANGES in this list. /libs is restricted and the changes can be overwritten by AEM installers.
We will override this list in /apps. We will follow the same path as in libs, but just replace libs with /apps.
Browse to /apps/wcm in CRXDE. You would observe that we do not have a core folder under wcm. We will need to recreate the rest of the structure.
Create a new folder names core, under /apps/wcm, and Save All.
Now we will go back to the resources folder under /libs. Browse to (/libs/wcm/core/resources). Select resources node and Copy it.
Now browse back to the core folder under /apps (/apps/wcm/core); select core and paste the copied content here and then Save All.
Note: In case you see an error, it is because you have not saved the core folder, that we created in the previous step.
Next, we will iterate over all the language nodes and replace underscores “_” with dashes “-”, do that “de_de” will be replaced with “de-de”.

BEFORE AFTER

Next, we will add the additional Indian language Punjabi (pa). For doing so we will need to create a new node and name it pa.
The node will get added at the bottom of the languages list. Once the node is created, add two properties, both of string type, language and country, as shown below:

Save all the changes and restart AEM.
Now when you create a new project, you shall see the updated list of language codes, with dashes instead of underscores.

You will also be able to see the newly added language: Punjabi

Hence using this procedure, you can update the list of languages as well as codes in Translation Projects. If you have any questions, I would love to have conversation with you. You can always reach me out on my email <prafful.jain@gcell.in>.

About Me:
I am the CTO of the Digital Marketing practice at GCell. I have spent my last 15 years, building as well as customizing various Content Management and Marketing Publishing Solutions. I have deep interest in Digital Marketing. Apart from helping multiple marketing teams execute on their strategy, I have also helped them measure effectiveness of marketing, using data driven technologies and analytics. If you have a need in any of these area, I would love to have a conversation with you.

XLIFF support in AEM 6.2

November 20, 2016April 5, 2019praffulljainLeave a comment

AEM 6.2 release was a major milestone from translation perspective. In this release, AEM took a huge step forward and added support for XLIFF generation, making AEM truly vendor agnostic. In this post, we will see try to evaluate what is available in AEM 6.2 and how can you take advantage of the same.

First and foremost, there is a NEW simple interface to support XLIFF. It has two simple APIs – one for generating XLIFF from AEM XML (export workflows) and the second one is for ingesting XLIFF back into AEM by converting that to AEM XML. For folks who like to see the parameters, here are the exact APIs:

public interface TranslationXLIFFService {

/**

* Converts an XML document, corresponding to a translation object, to an equivalent XLIFF string

* @param xmlDocument XML document containing the content to be translated

* @param id Unique id corresponding to the translation object from which the xmlDocument was created

* @param sourceLanguage Source language of the translatable content inside xmlDocument

* @param xliffVersion Version of the output XLIFF

* @return String containing the complete XLIFF

* @throws TranslationXLIFFServiceException

String convertXMLDocumentToXLIFFString(Document xmlDocument, String id, String sourceLanguage, String xliffVersion)

throws TranslationXLIFFServiceException;

/**

* Converts an XLIFF InputStream to an equivalent XML

* @param xliffInputStream Input XLIFF stream

* @param sourceLanguage Source language

* @param destinationLanguage Target language

* @return XML Document

* @throws TranslationXLIFFServiceException

Document convertXLIFFStreamToXMLDocument(InputStream xliffInputStream, String sourceLanguage, String destinationLanguage)

throws TranslationXLIFFServiceException;

}

This interface can either be implemented by an AEM user, or there is an implementation available on PackageShare. For the purposes, of this blog post, we are going to install the package from Package Share.

Download package from here: https://www.adobeaemcloud.com/content/marketplace/marketplaceProxy.html?packagePath=/content/companies/public/adobe/packages/com.adobe.granite.translation.xliff/okapi-xliff-service-pkg

Once you have the package, install it on AEM using Package Manager (http://localhost:4502/crx/packageshare/index.html). This package supports both XLIFF 1.2 and XLIFF 2.0

Now the Translation Connectors can request XLIFF using the Translation Service. However, in case you do not use a connector and want to use Import/Export workflow from Translation Projects / Jobs, you will need to additionally set another option in the Felix Console. Follow these steps to enable XLIFF for Import/Export workflows:

Browse to Felix Console Configuration Manager (http://localhost:4502/system/console/configMgr)

Search for “Translation Platform Configuration” and click open it

Select the right XLIFF format here.

Once this property is set, if you Export a Translation Job, it will export the content in that specific XLIFF version.

Please note, this setting applies across the AEM instance.

Footnote:

In case you have an OKAPI service that you run for your company, you can easily write a connector to the OKAPI service. We have a connector of our own, which is built on top of OKAPI. We have open sourced it. Please see this blog post for more details.

XLIFF Connector: now Open Sourced

November 16, 2016praffulljain1 Comment

This has been long pending. We always wanted to to open source the XLIFF connector for Adobe Experience Manager 6.1, but have been really busy. The connector was built for Adobe Experience Manager 6.1 and is listed on the Adobe Marketing Exchange here. The connector was always free and anyone could download the connector from Adobe Marketing Exchange. The connector was also featured in Multilingual Magazine. Today, we are open sourcing the source code. You can look at the source code here: https://github.com/ExperienceLabs/xliff-export-connector

For core XLIFF conversion, connector relies on the OKAPI framework. It supports both XLIFF 1.2 and XLIFF 2.0 conversion. In case, you have forked OKAPI and have a modified version, you can just replace the OKAPI libs and repackage the connector.

In Adobe Experience Manager 6.2, Adobe has improved XLIFF support. Interestingly enough, they did not go ahead and implement XLIFF conversion. Rather they defined an interface and rely upon customers to implement the interface (basically write an XLIFF conversion). The XLIFF interface is modeled on Translation API. You can repurpose the XLIFF connector to build a connector for AEM 6.2 by implementing the interfaces as exposed in AEM 6.2. I want to do the same, but will park that as weekend project for later. I will share with you more once I get around implementing it myself.
Happy forking!!

Multi-root Launches

September 6, 2016praffulljain1 Comment

Today, I will talk about a multi-root Launches, which is key enhancement to Launches feature in AEM 6.2. I am also happy to share that I got a chance to contribute to this features. Launches, have been around for a while, and are widely used. Now AEM core features like Translation workflows have started to leverage Launches as a staging area for working on translations before they replace the actual content. Based on the customer and internal feedback, we identified two key shortcomings in Launches and we worked on those in AEM 6.2 under guidance from Gilles Knobloch, Mathias Siegel and Akshay Madan at Adobe. They being:

Multi-root launches.
Promoting only changed pages in a Launch.

Multi-root Launches

Prior to AEM 6.2, when you created a launch, you had to create a copy of the complete branch. You did not have the option to select a few sub sites and work on those. This has been completed revamped in AEM 6.2. Firstly, you can select, multiple pages (including sub pages) at the same level and create a Launch. In addition, you can also add other pages (including sub pages) at a very different level using the “Create Launch Wizard”.

Let me explain this feature using the Geometrixx sample. Let us say that for the next update, we want to work only on three sections in the website – Products, Services and Press Center. As you are aware, Products and Services are at the same level, however Press Center is at a very different level.

We will create a Launch to have just these three branches. Firstly, select both Product and Services and select Create > Launch.

This will open up the Create Launch Wizard and will have these two sections of the website in there.

Next, Select “+ Add Pages” and browse to the Press Center. Select it and add it.

This will add Press Center as an additional root in the Create Launch Wizard. The three roots being, Products, Services and Press Center. Products and Services were at the same level, but Press Center is at a different level.

Select Next to view Properties and set the Properties.

Using this dialog, you can also change the template as well. Very useful, when you want to update the look and feel of the website.

Clicking on Create will create the Launch, and it will have only the selected roots (branches as part of the Launch).

Under the hood:

Let’s try to see the structure of the newly created Launch. Unfortunately, you can’t browse launches structure in Sites Admin (I don’t know why, Adobe can you please enable this), hence we shall see it in CRXDE.

As you will see there are three sources, and only the selected content is added in the Launches. Make sure to observe that there is only Press Center content under Company.

Alternately, you can see the structure using Path Browser (from Create Launch Wizard)

Promoting only changed Pages:

In the first enhancement, we saw that starting AEM 6.2, you can create a Launch with a smaller scope, with only those sections that you are going to update. However, not all pages in a launch get updated. The next enhancement is targeted at solving that problem. While promoting a Launch, the new default option is to promote only the changed pages. This is a very useful enhancement as it reduces the number of pages that need to be promoted.

Let’s look at this enhancement in action using the launch that we created while explaining multi-root Launches. We will go ahead and update the Products Page, add a new page in Products section (hexagon) and also update Services Page. What we are not doing is going to edit in the Press Center section. This is a common scenario where you think that you are going to update something, but then plans change, and you do not update a section anymore. In such cases, this enhancement helps us remove any of the content that is not updated.

Once you have made edits, let’s go ahead and promote pages.

As you see in the screenshot above, there are four options under Scope. The default option selected is “Promote modified pages”. This option will only promote the pages that have been modified after the Launch was created. Let’s look closer at all the four options:

Promote full Launch
This option will promote all the pages in a Launch, irrespective of the fact of they were modified or not.
Promote modified pages
This option will promote only those pages in the Launch that have been modified after the Launch was created.
Promote current page
There are several ways in which you can invoke Promote. Using the “References Panel” you can invoke the action to Promote a page from any page that is part of the Launch. In such cases, you can select to promote only selected sections of the Launch. If you invoke Promote action from within a page of a Launch, using this option, you can go ahead and promote only the selected page.
Promote current age and sub pages
This option builds on the previous option. Using this option, we can go ahead and promote a page that is part of the Launch along with it’s sub pages.

Let’s try these options one by one on our Launch. Remember, the changes that we did. Here is a summary:

Products
- Updated Products Page and added a new page – hexagon
Services
- Updated Strategic Consulting page
Press Center
- No changes.

Option1 (default): Promote only modified pages.

When you select these options, you will see that it will list only those pages that we modified. The three pages that we listed above:

Option 2: Promote full Launch

Selecting this option, will promote all the pages in the Launch. So it will list all the pages in the Launch whether you modified it or not.

Options 3: Promote current page.

In this scenario, we will set the context to be “Services” and try to Promote Pages.

Option 4: Promote current page and all sub pages

With the same context, we will use the last option.

What is important to note is that, there is no optimization regarding which pages to update. It will update current page and all the subpages irrespective of the fact if they were modified or not.

Hopefully this was useful. Look forward to hearing comments.

Global Site Structure: Part 3

August 7, 2016praffulljain3 Comments

This blog post is in continuation of the Global Site Structure Series. This is the third blog in the Global Site Structure Series. In case you haven’t read the first two, here are quick links:

In this blog, let’s take a step further and think through how would we set up such a site in Adobe Experience Manager (AEM). What I will try to do is set-up a site using We.Retail sample that ships with AEM 6.2 and can be found here: https://github.com/Adobe-Marketing-Cloud/aem-sample-we-retail

AEM has two important concepts – Live Copy and Language Copy. Most often a lot of information architects and developers confuse these two concepts. My colleague Gaurav Garg has covered the these concepts in this blog: Language Copy or Live Copy | An Important Decision. Here is a thumb rule that I use:

Sites (partial sub sites included) in same language – use LIVE COPY. Useful for Corporate > Dealer or Company > Reseller kind of scenarios.
Sites in different language – use LANGUAGE COPY. Useful for global sites, when the same content is translated in multiple languages. These can be updated as well via Update Language Copy

For most organizations, that I have worked with, most authoring (95+ percent) happens in a single language. And usually authoring happens for a particular geography. In case of We.Retail, let’s assume that primary authoring happens for North American market (USA to be specific) and in English language. The first and foremost thing that we will do is to set up the primary Authoring Branch. This the the primary authoring language. This is how it would look in AEM:

And this is the view in CRX:

Since this site contains USA specific content, we will create an International copy. We will create a Live Copy from the authoring site. We will create this under We.Retail Language Masters under en_gb locale folder. You can use en as well, in case you want it to be agnostic to the dialect. After the Live Copy has been created, we will break inheritances for any content that was US specific. We shall ensure that the content is truly common and can be shared across different geographies and markets. Here is a picture that describes how to set up International English

One important thing to note is that that We.Retail Authoring Site is not identical to International English Site. It has common content that applies to all geographies and markets.

Next we are going to translate the common content to various languages. For illustration, we will set up only four additional languages – Spanish (es_es), French (fr_fr), German (de_de) and Italian (it_it) and will will set up five countries – USA, Canada, France, Germany and Switzerland.

We use International English as the source and translate content in four languages – Spanish (es_es), French (fr_fr), German (de_de) and Italian (it_it) using Language Copies functionality in AEM. In order to create Language Copies, create language roots in all these four languages. Language roots are nothing but blank pages named using these specific locales.

Language Copies require a specific structure. Things that you need to take care off are:

The Language Root name must be a language ISO locale. You can use either two letter locales (en, fr, de), or five letter locales (en_us, en_gb, fr_fr, fr_ca). You can choose to use dashes instead of underscores as well (en-us, en-gb, fr-fr, fr-ca).
All the Language Roots need to be at the same level. In our setup, we are going to use five letter underscores, and set them up under language-masters node. Please note, most companies use dashes. I will write another blog post to talk about those.

Once these Language Roots have been created, these will start appearing in the References Panel, under Language Copies. You can invoke Create Language and Update Language Copy workflows from References Panel.

Once the Language Copies have been created, we will now go ahead and create Country Sites. I am skipping a lot of details about how to configure and kick of translation as well as Update Translations. It will be a topic for another blog post. It has been covered fairly well in the AEM documentation as well: https://docs.adobe.com/docs/en/aem/6-2/administer/sites/translation.html.

Here is a pictorial representation of the progress so far:

Next we are going to create country Sites. We are again going to use Live Copy functionality (MSM) to set up country websites. We will set up Live Copies between the Language Copies under Language Masters to specific Country Sites. Let’s first set up country sites for Canada, France, Germany and Switzerland. We are intentionally skipping US for a moment.

Here is a pictorial representation of the setup for We.Retail Canada and We.Retail Schweiz (the ones that have more than one language):

Here is what we did for setting up country sites for Canada, France, Germany (Deutschland) and Switzerland (Schweiz):

Live Copy from International English (/content/language-masters/en_gb) to We.Retail Canada English (/content/ca/en_gb) and We.Retail Switzerland English (/content/ch/en_gb)
Live Copy from French Master (/content/language-masters/fr_fr) to We.Retail Canada French (/content/ca/fr_fr), We.Retail Switzerland French (/content/ch/fr_fr) and We.Retail France (/content/fr/fr_fr)
Live Copy from German Master (/content/language-masters/de_de) to We.Retail Deutschland (/content/ca/de_de) and We.Retail Switzerland German (/content/ch/de_de)
Live Copy from Italian Master (/content/language-masters/it_it) to We.Retail Switzerland German (/content/ch/it_it)

After the Country Sites have been created, they will contains all the common content. We all know that each geography has country specific content as well. Now marketing managers can go ahead and create additional country specific content in each of the country sites. You can have local contact addresses, campaigns, event information etc.

Let’s now talk about USA site. Since we already have adaptations for the US market in the authoring site, we are going to leverage that. So for English, rather than creating a Live Copy from International English, we will create a Live Copy from the main authoring site.

These are the steps that we follow for creating the USA english site.

Live Copy from Spanish Master (/content/language-masters/es_es) to We.Retail USA Spanish (/content/us/es_es)
Live Copy from We.Retail Authoring Site (/content/we-retail/en) to We.Retail USA English (/content/us/es_us)

This is one way of setting up the structure. I have to admit, this has been a long post. I hope you will like this useful. I would love to hear your feedback.

Global Site Structure (Nike.com): Part 2

June 27, 2016praffulljain1 Comment

This is a second blog in the Global Site Structure Series. In case you haven’t read the first one, you may want to read it here.

Today, we will look at Nike’s website: www.nike.com. It is one of my favourite website when it comes to a clean Global Structure. Nike.com is a true Global eCommerce site. It has different catalogs based on regions .Looking at it from outside, it looks like Nike has given special emphasis on two points –

They have regional catalogs – they do not sell the same merchandise in every region.
The structure is ready to cater to countries where multiple language. I would like to see more languages for India 😀.

They make it really simple to change the region. The regional setting are shown via Flag at the top right corner of the website. Each region has a homepage designed to connect with that region. Here is the home page for India.

Nike.com.png

Source Url: http://www.nike.com/in/en_gb/

If you look carefully at the url, you shall see that www.nike.com has a consistent url pattern [www.nike.om/<region>/<language>] ]which helps SEO, fallback rules and discoverability.

If one wants to switch to a different region and a language spoken in that region, one can do so quickly by clicking on the Flag. They have implemented a special page which they refer as Language Tunnel for switching between different regions and language sites spoken in that region.

Let’s look closer at the experience of switching the website from India (UK English) to let’s say Switzerland. When I clicked on the Indian flag, I was directed to Language Tunnel

Screenshot url: http://www.nike.com/language_tunnel

On this screen, when I clicked Europe, it listed all the country sites. Clicking on Switzerland opened a popup which listed four languages in which the site is offered. Here is how they do it today, please refer black pop-up where Nike.com offers Switzerland site in four languages – English, French, German and Italian:

Screenshot url: http://www.nike.com/language_tunnel

Clicking the language in the popup opens up the site with Swiss flag on the top right. If you switch between different language sites for Switzerland, you shall see that they have a very consistent and clean url structure [www.nike.om/<region>/<language>] as I described earlier.

English: http://www.nike.com/ch/en_gb/

German: http://www.nike.com/ch/de_de/

French: http://www.nike.com/ch/fr_fr/

Italian: http://www.nike.com/ch/it_it/

In the next blog, I will talk about how one could set up the content structure in AEM to support such a website.

I hope you are enjoying reading these blogs.

Global Site Structure: Part 1

June 18, 2016praffulljain2 Comments

Today, I am going to start a series of blogs to explore Global Site Structures. It is one of the most important decisions that you have to make while setting up your website. Adobe Experience Manager (AEM) is a very flexible tool and doesn’t restrict you when it comes to site structure or content architecture. Hence it is very important decision. Once you decide the structure, you will have to live with the structure. Changing a structure is possible, but it is an expensive processing with deep impacts on operational efficiency, SEO, governance etc.

Before we deep dive into several websites, here is a webinar on Adobe website, co presented by Christine Duran and Matthias Siegel.

https://docs.adobe.com/ddc/en/gems/aem-6-1–translation-integration-and-best-practices.html

In this webinar, Christine talks about two different Site Structures and Matthias then shows how to create those using AEM Translation features.

Here is a screen capture from the webinar. The two structures described are around translation optimization and shared content.
09302015_AEM GEMS_Translation integration and best practices.png

Corporate Centric Content Model (Language > Country Region)

This model works great for enterprises that have common global offerings. The website content is same across all regions. Here most of the content is authored centrally at a corporate location and is adapted at the country level.

Region Centric Content Model (Country Region > Language)

This model is designed for enterprises that have different offerings per region. A good example can be any eCommerce website. The goods sold at Amazon India are not the same as Amazon US or Amazon UK. In such cases, it is always advisable to have region based content masters (which can share content from a Global Corporate Master), but then have significant adaptations in the source at the region level before the content is sent out for translation.

In the next post, we shall look at some websites and see how they are structured.

Adobe.com Machine Translation widget launched

January 30, 2016praffulljainLeave a comment

Two weeks back on 18^th Dec 2015, Adobe.com launched a pilot project for allowing machine translation of English content to Korean language. You can check the new feature on

In all these product pages and sub pages for these products, you can see a new machine translation (MT) widget at the top.

If you click on hyperlink in that MT widget, it takes you to a new new page with all content translated in Korean language like this http://www.adobe.com/kr/products/premiere-elements.translate.html

In this new translated page, you can see all the text in the page is getting translated from english to Korean language. Also you can see that the MT widget at the top now changes to show a hyperlink to take you back to original english page or you can provide feedback on whether you like the translated content or not.

All the translation is based on the new AEM 6.1 translation API (API Link) and all the translation is done using Microsoft machine translation connector which comes bundled with AEM 6.1 out of the box.

This accomplishment was made possible by a fantastic partnership between the Adobe.com and Adobe Globalization teams and Gcell technologies AEM team. Gcell technologies engineering team designed, coded and tested the MT widget.

Next blog post I will give an insight into how MT widget was created, as I was the one responsible for designing and coding this cool widget, stay tuned.

Hello World!

August 7, 2015praffulljainLeave a comment

Hello World!! That’s how nerds start anything. By now you know that we are a bunch of nerds who believe in creating delightful digital experiences. In this blog, we want to not only cover the technical details, but also end customer experiences, best practices, learning’s from pilots etc. We would also like to learn from your experiences. So, I encourage you to start a conversation by posting a comment below.

Before I go any further, let me introduce myself. I am Praffull Jain, an engineer by education and digital marketer by profession. I have spent last 13 years working on content management systems, personalization and digital marketing. I have also invited my team to contribute to this blog. Hence you would see posts from other as well.

I work very closely with Adobe on architecting and developing Translation features in Adobe Experience Manager, the product itself. It is quite interesting how Adobe has made translating websites simple in Adobe Experience Manager. In addition, I also work with another team at Adobe that manages the Support and Help portal at Adobe (helpx.adobe.com). We are doing some nifty things around personalization and reinventing customer experience.

I also wanted to talk a little about the name of this blog. It is inspired from a blog that I read religiously. It is the one that original DAY team (creators of Communiqué aka Adobe Experience Manager) managed – experiencedelivers.com

Well, I am excited to have finally had this platform, which I plan to use to learn and interact with others who share the same passions – reimagining digital customer experiences.

EXPERIENCE LABS