Setup Translation Rules set-up-translation-rules-in-aem

Transcript

Hey what’s up? In this video we are going to be looking at the translation rules editor introduced in AEM 6.3. So I’ve got an English page here with several components on the page. And this is in my English language masters. And if you take a look we’ve got reusing the out of the box title component and text component and then I’ve got a custom component. This header component that created really just for this demonstration. And if we switch over here this is a German language copy that I created. And you can see that the title and the text component those were translated using the Microsoft machine language translation but our custom component, this header component was not translated. And so we’re gonna be in this video we’re gonna be using the rules editor to make sure that any custom component that we have gets translated along with the L box components.

So what we’re gonna do is inspect this custom header component and figure out exactly what properties we need to add to the translation rules editor, so I’m just gonna go into developer mode and find our custom header component and we’ll just open that up and CRXde Lite.

And so we can look at the header dot HTML sly script and so we can see here that the the property is this property called header text. And so that’s what’s rendering that hello world text. And so this is the property that we want to get translated and we can go ahead and inspect the content itself and just to confirm that this indeed is the property we want to get translated. So we’ll just open up this same page in CRXDE Lite, And you can see that it’s this header text. And so the value is hello world. And that’s the property that we’re going to be adding to the translation rules editor. So to navigate to the translation rules UI you’d go to Tools and then Translation Configuration. And so you can see there’s a few different contexts and we’re just going to open up the slash content context, and there is a general rules. And so you can see here there’s already a whole bunch of properties that are queued up to be translated. And the most important really is this text property. So any component that makes use of RTE generally saves that content under this text property and these this general rules basically covers all of the out of the box components. And so this will cover pretty much anything and We Retail. There’s a filters tab which allows you to filter out certain properties that you don’t want to queue up for translation. So like CQ annotations is something that we wouldn’t want to translate.

The references tab defines which reference content will get translated and a language copy would get created. So the most common example would be a content fragment that gets embedded on a site’s page. We would expect that content to have a language copy created and get translated. And so if it matches one of these patterns that will happen. We’ve also defined it is the out of the box image components. So those would also get translated and you would have that image metadata get translated as well.

So in our case we want to add a new rule for our header component so that that property gets translated. So we’ll hit add component. The first thing we need to do is find the resource type for our header component. So go back to CRXDE Lite copy the sling resource type and then we’ll just paste that path here in the component path dialog. So now we’ve added our header component and then we need to define the properties on that component that should get translated. So we just have one which is that header text property. So just paste that in here. And we’ll select translate and then we’ll save our changes.

So before we proceed, let’s take a look at where the translation rules that we just modified are actually persisted. So we’re just gonna go back into CRXDE Lite and the translation rules are actually persistent in xml file. and those are under etc workflow and if we expand models there is a translation workflow. And so here we can see the translation rules xml file and if we inspect this we can see our custom component, so we can see the sling resource type for our header component and we can see it has one property. So in previous iterations of AEM, you had to if you wanted to update these the translation rules you had to modify this xml file directly, going forward, it’s a best practice to use the translation configuration UI.

So now that we have our rules up to date, we can go ahead and update our German language copy. So I’m going to select the English page and expand the rail and under references we can see the current language copies and so we’ll just select the German one and actually before I kick this off, one nuance of the translation workflow is that the source page needs to have been updated in order for the language cut the update language copy to run. So just make a small change on our English page and then we should be able to update the German language copy. So I’m just going to add the added to an existing translation project, I’ll go ahead and click update and so we can go to our translation project and we can see that we’ve got one page ready in the translation job so we’ll just kick off the translation job we’ll give that a couple seconds and it should be finished. It’s just a single page that it’s gonna get machine translated. And now we can go ahead and inspect the translation. So it did work which is it’s great. Our header component did get translated that means that that header text property that we added to the rules editor is getting translated. You’ll 'also notice that a launch has been created to capture the language copy update to the German page. This is a standard part of the site’s translation framework and it’s designed so that review and modifications can take place on the launch copy outside of the normal updates to the German page. So let’s go ahead and compare our launch with the current version of the German page. So if we expand the launch section we can click the compared to previous button and on the left hand side you’ve got the translated launch that has our update. So we’ve got the header text translated on the left hand side and then on the right hand side you can see the component which has not been translated. So in order to promote our launch, we can go in and select the current German page in our language masters expand the rail and under launches, we can go ahead and promote the launch. And so it let us know that we’re going to be promoting a launch. That was the last modified by the translation workflow service and then we can go ahead and promote it. And now if we open up our German language master page, we’ve got the updated component that has been translated. So that concludes this video on the translation rules editor and how we can leverage this UI to ensure that custom components and properties get translated. Thanks.