Expand my Community achievements bar.

Editable templates under /content/campaign

Avatar

Level 3

Hi,

According to our recent investigation Template editor does not work on pages created under /content/campaign.

AEM injects code into the markup that makes the page incompatible with the editable templates. By decompiling several java classes, I found that pages under /content/campaigns are processed by AEM differently than other content pages (path.startsWith("/content/campaigns") found in AEM's code).

Investigated on AEM 6.2. Is there a hot-fix / feature pack fixing this issue?

Thank you.

Best regards,

Gyorgy

6 Replies

Avatar

Administrator

I would request you to create a daycare ticket for this.

~kautuk



Kautuk Sahni

Avatar

Level 3

We found a way to implement editable templates for emails with AEM's Template Editor to create emails under /content/campaign, but there were several lessons learnt.

  • The OOTB page component (wcm/foundation/components/page) and the layout container component support the use of the template editor out of the box. On the other hand, the OOTB campaign newsletter page component doesn't support the template editor, but this page component provides other features that are necessary to make campaign emails. From these two OOTB page components it is possible to create a template editor compatible newsletter page component. The key is the body.html of the OOTB page component, which contains code to include the structure components. Additionally, there are overrides in the OOTB newsletter page template (e.g. body.js) that has to be copied over from the foundation page component.
  • The Template Editor doesn't work with the campaign parsys component, so we decided to go with the layout container, but most of its features were removed, since we have to keep strict restrictions on our markup and css features recommended for email client compatibility.
  • The resource type of the OOTB newsletter page component has to be used as resource super type for any custom newsletter template created, otherwise pages created under /content/campaigns will open on the classic UI (even if my preferred interface is the touch UI).
  • It is worth calling out, that linking the email with a campaign delivery and syncing the content with ACS will only work if the resource super type of my template is the OOTB newsletter page. The POST requests issued from ACS to AEM aren't responded properly in any other case (probably the handler is tied to resource type).
  • When this is all done, one have to setup a template definition carefully.

Using our Template Editor enabled newsletter page component we can design editable templates for emails and create emails from them under /content/campaigns.

Avatar

Level 2

Hi Kornel,

We are planning to use Editable templates for Adobe Campaign pages, Can you please briefly explain the steps clearly , so we will follow to achieve this?

Thanks,

NAveen

Avatar

Community Advisor

Create a page component similar to below-

1. Create as structure for page component extending the core page component

2. Then override head.html and add below code on top of head.html code-

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.all @ categories='cq.widgets'}"/>

<meta id="campaignContextHub" data-register="true" />

<sly data-sly-resource="${ @ path='config', resourceType='/libs/cq/personalization/components/clientcontext_optimized/config'}"/>

<sly data-sly-resource="${ @ path='contexthub', resourceType='/libs/granite/contexthub/components/contexthub'}"/>

This is to enable campagin features

3. Then follow steps in below link to create editable templates-

https://stackoverflow.com/questions/39290361/template-editor-aem-not-working-as-expected

Create the template

For now, we'll create the template in the global folder, later however you'll have to make sure that the chosen folder is specific to your site.

  1. Go to the Template Editor (in AEM's global nav, select General > Templates).
  2. Pick the global folder (or your site-specific folder).
  3. Hit the "Create" button and choose "HTML5 Page", hit "Next" and give your template a name, like "Simple Page", then hit "Create" and choose "Open".

Add Client LibrariesLet's configure the page component to load the CSS and JS client libraries that are needed for our site.

  1. In "Structure" mode of the Template Editor, select the second icon from the top-left ("Page Information") and choose "Page Policy". A policy is basically a reusable design configuration that can be shared and reused across multiple templates if desired. What we'll do is duplicate that policy and then edit it to instruct the page to load additional client libraries.
  2. In the "Policy" dialog, duplicate the "Default Page" policy with the double-arrow icon and rename it for instance to " Config". Then click the checkmark at the top-right of the dialog to save.
  3. Again in the top-left ("Page Information") menu, choose this time "Page Design" to edit the actual design configuration.
  4. Edit the list to include all client libraries required by the components that you plan to use. If the template author isn't a developer, this is typically where the developer must instruct the template author what clientlibs must be loaded on the pages of a specific site. In case you have We.Retail installed, you can add a field and paste we-retail.base into it. Save by clicking the top-right checkmark.

Add Structure ComponentsStructure components are those that were usually hard-coded through static includes on the page components. We typically don't want the structure components to be editable by our page authors later on, unless explicitly defined.

  1. On the page, select the empty parsys and in its toolbar, choose the 1st icon ("Policy") to edit policy.
  2. In the "Policy" dialog, duplicate the "Default Layout Container" policy and rename it for instance to "Template Config". This will be the name of the configuration that tells what components are available in the template for that page-level layout container. Save.
  3. As the page reloads, select the empty parsys again, and this time choose the 2nd icon ("Design") to edit the design configuration.
  4. In the design dialog that opens, select all the components that you want to have available in the template editor (for example, in addition to the few General components already selected, also select the "We.Retail" and the "We.Retail.Structure" component groups at the bottom of the list, or the group name you assigned to your components with the componentGroup property). Make sure to have also the "Layout Container" component selected, as this is the paragraph system (aka parsys) that we'll require later to make the page editable. Save.
  5. You should now see your components showing up in the left "Components" rail, which allows to drag & drop your header and footer components to the page (for We.Retail the header is named "We.Retail Page Header" and is at the very bottom of the component list, and it is similar for the footer).
  6. Also drag a "Layout Container" component between your header and footer components, which is the actual parsys that we'll make editable for our page authors. So on your page, you should now at least have following components: your header (e.g. "We.Retail Page Header"), a "Layout Container", and your footer (e.g. "We.Retail Page Footer").

Make the template editableWe now have to specify which of the components added we want page authors to be able to edit.

  1. Select the parsys placeholder that appears between the header and the footer, and click the last icon of the toolbar ("Unlock structure component").
  2. Once this is done, the placeholder says "No allowed components for Layout Container", the reason is that this parsys has no policy yet assigned to define the list of allowed components for the page authors. Therefore, select this parsys placeholder again and from the toolbar select the second icon ("Policy").
  3. To base our policy on the one previously edited, select the "Template Config", and the hit the duplicate icon and rename it to "Page Config". Save.
  4. The list of allowed components now appear below the parsys placeholder, which looks good, except that we want to remove the components that we want available in for the template structure only. Therefore, let's select the placeholder once more and select the 3rd icon ("Design") from the toolbar.
  5. In the design dialog, uncheck the structure-specific components and groups (for e.g. uncheck the "We.Retail.Structure" group). Save.

Use the templateThat's it, we can now enable the template and use it on a site.

  1. On the template admin (which should be still open in a previous browser tab), select your newly created template and hit "Enable" and confirm "Enable".
  2. For pages to be able to be created from templates of the folder we used, one will need to put a cq:allowedTemplates property on a parent page (typically, this property will be set to the root page of the site). However, to create the very first root page, we'll initially just add that property to the /content node by using CRXDE Lite. So go to http://localhost:4502/crx/de/index.jsp#/content and on the root content node set cq:allowedTemplates multi-String property that equals to "/conf/global/settings/wcm/templates/.*" (or whatever folder you created your template in).
  3. Save.
  4. Back in AEM open the global menu and go to Sites and on the root folder, click "Create" and choose "Page".
  5. Choose our "Simple Page" template, hit "Next", give the page a title, like "My Site" and click "Create" and "Open".

You should now see the page with the defined header and footer, but only the parsys in between that is editable. Also the desired components should show up in the left rail under the second "Components" tab.Create a Template TypeIn order to avoid having to repeat all these steps (mainly 1-18) each time one wants to create a new template, we can create a template type out of the template that we created.

  1. In CRXDE Lite, go to the folder where you've created your template, like /conf/global/settings/wcm/templates and copy the template that should become a template type, like the simple-page node in our case.
  2. Move to the template-types folder (e.g. /conf/global/settings/wcm/template-types in our case) and paste there the copied node.
  3. Save.

Now, when creating a template in the global folder, one can choose the "Simple Page" as a starting point.

As you can see, the Template Editor introduces a very big change, not only technically, but also in the process: what required development steps can now be achieved through configuration. I'd therefore recommend to edit the page component only to adapt the technical HTML headers, but not to hard-code any visual items that should be displayed on the page, because surely enough in a few months/years the visual items will change and multiple variations of them will be required, for which you want to lighten the development need to allow faster changes.

Also helpful are following links:

Avatar

Community Advisor

Hi,

I think custom solution is only there as updated before.

 

Regards

Ankur