Skip to main content Skip to main navigation Skip to search Skip to footer
Type to Search Subscribe View Tags

HCL Technologies

Understanding Adobe AEM Editable Templates

Understanding Adobe AEM Editable Templates
Digvijay Singh Tomar - AEM Technical Architect, Digital & Analytics | March 5, 2019
766 Views

In today’s world of engagement where experience is the key, business stakeholders are looking to have more flexibility in the publishing process including both content and experience. Publishing team have frequent requirements to create new layout or to create new template while authoring the content for touchpoints. These templates have different designs and layouts to create different types of pages on website.

  • Template with header and footer that will be used across most of pages.
  • Blank Template with no header and footer.
  • Create page with template having default content for all pages created based on certain template.
  • Business team wants control to create such pages without involvement of development team to create different templates.

Adobe has introduced new feature of Template Editor in AEM 6.2 that has some improvements in AEM 6.4. The updated version of adobe aem provides flexibility to template authors to create editable or dynamic templates as per need. The Adobe Experience Manager Development team is involved for initial environment setup, to create client libraries and to create components that will be used on editable templates. Template author can create and configure templates without help of development team.

The updated version of adobe aem provides flexibility to template authors to create editable or dynamic templates as per need.

Here are benefits of using editable templates:

  • Editable templates provided flexibility to define content policies to persist design properties. There is no need of design mode which requires extra permission to give author to set design properties along with replication of design page after making any design changes.
  • It maintains dynamic connection between pages and template which gives power to template authors to change template structure along with locked content which will be reflected across all pages based on the editable template.
  • This doesn’t require any extra training for authors to create new page based on editable template. Authors can create new page in similar way as they create with static templates.

Code development is required before configuring editable templates. Please follow below steps for pre-development. Here we are going to setup demo project. In actual project, these values can be replaced with project specific names.

  • Create maven 13 archetype project by running below command and provides values specific to project. In this case it is Demo.
    mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate -DarchetypeGroupId=com.adobe.granite.archetypes-DarchetypeArtifactId=aem-project-archetype-DarchetypeVersion=13 -DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/

  • Above step will create default project folder (in this case it is Demo) under /conf to contain all editable templates that will be created by content author.
  • conf/Demo folder will be created under ui.content project which will be deployed to AEM for first time. Template author and authors will create content in this folder only directly on AEM instance.

    CRXDE

    As above screen shows, it creates Demo folder under /conf and creates settings/wcm node having different node.

    • templates : This will contain all editable templates created by template authors
    • policies : This will contain all the policies (will contain configuration what component will be used on this template along with initial content) configured for different editable templates
    • template-types : This will contain templates created by developer which will be the base for template authors to create editable templates.
  • Maven will create default clientlibs. You can create more clientlibs to apply on same template or different editable templates.
  • Create few component for ex. Header, Footer, Column control and Text component in a regular way you create in AEM. These will be used on editable templates.

Adobe AEM offers Template Editor Console that provides flexibility to create templates without the help of the development team.

Adobe AEM offers Template Editor console that provides flexibility to create templates without the help of development team. Here are tasks template author can do with the help of the Adobe Experience Manager’s template console:

  • Create a new template or copy an existing template.
  • Manage the lifecycle of the template.
  • Add components to the template and position them on a responsive grid.
  • Pre-configure the components using policies.
  • Define which components can be edited on pages created with the template.

Note: Creating editable templates requires users to be in template-authors group.

STEPS TO CREATE EDITABLE TEMPLATE

Maven project created in Step 4 will create one Demo Empty Page Template having default configuration to have initial structure along with policies to define what components can be used on this template.

  • Create page (in this case it is site-page) template as base template to create editable template. This will be your normal template which you create in AEM.
  • Modify com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-demo.xml in config.author to enable mobile emulators on the page which will allow authors to layout the page specific to device.

    Click here for Image

  • Create base template which will allow template authors to create editable template. This is the configuration template which give flexibility to template author to create and configure as many templates as many template authors want, having different policies (allowed components) configuration.
  • Here are steps to create template.
    • Create template with name site-page and add it to .content.xml exist within /conf/Demo/settings/wcm/template-types folder.

      Click here for Image

    • Create initial, policies and structure folder and modify .content.xml to point it to site-page template (demo/components/structure/site-page).

      CRXDE

      initial

      policies

      structure

  • After following above steps, you can go to Tools > General > Templates > Demo and click on create template. Authors will be able to find new template with name Generic Site Page.

    Click here for Image

  • Please select Generic Site Page Template to create new template to create different pages. Following screen showing newly created page. Here two templates created based on one template.

    Click here for Image

    Author can create multiple templates based on template setup by developer as you can see in above screen two templates were created with name ‘Site Page With Header Footer‘ & ‘Site Page With Left Bar’ respectively both pointing to Generic Site Page template.

ENABLE TEMPLATE

Once template authors are done with creating templates, authors must enable templates to make them available in sites section where regular authors can select templates to create pages.

Here are steps to enable template.

  • Mouse hover template it will display … dots (More Actions) which will allow template authors to enable template.

    Click here for Image

  • Click on Enable button which will give popup to enable this template.

    Click here for Image

  • Once template is enabled it will be immediately available in Sites Section for authors to create pages.

Template authors will be able to configure policies, initial content and layout by selecting template and click on edit button. This will open template by default in Structure mode where template author can configure policy. Please find detail below.

CONFIGURE POLICIES

With defining policies authors will be able to configure different component on the page for regular authors to place on the page.

  • Select template and click on edit button will open template by default in Structure mode where author must click on paragraph system to configure policy.

    Click here for Image

  • Click on first (Policy) icon will take author to new screen where author can define what components can put on this template. Here please provide policy name along with selected default component for this template. In the same way author can configure for different templates.

    Click here for Image

  • Once done components will be available on the page to drag & drop on the page.

CREATE INITIAL CONTENT

This mode will allow template authors to put initial content on the page for ex. Header and Footer so that when regular authors are creating page based on this template header and footer will be present by default on the page.

  • Please change mode to Initial Content
  • Place components on the page to appear as default component

    Click here for Image

    Click here for Image

CREATE LAYOUT

This mode will allow template authors to define layout for the page for different devices. By switching to Layout mode template authors can define layout for different components appearing on the page.

Click here for Image

Click here for Image

In above screen, you can see dots in left and right of the component. By using these dots authors will be able to define width of component for different device groups.

CREATE A PAGE

Once template authors are done with setting up editable templates regular author can create page. After creating page, author will be able to see initial content on the page put during configuring editable templates.

Click here for Image


Contact Us
MAX CHARACTERS: 10,000

We will treat any information you submit with us as confidential.

We will treat any information you submit with us as confidential.

Sign in to Add this article to your Reading List
Register