Define Template and Properties

  • Templates are used for creating pages and for building the initial page content in a jcr:content node tree
  • When authors create a page they should use a template for the page
  • When a page is created sling:resourceType of the template is copied over to the new page, this creates a link from new page to its rendering component
  • Other properties of the template control where it can be used, and the order it appears on the list of templates when creating a page
  • Template can also contain initial content for the page in a jcr content node tree
  • Attributes and properties of a template:
    • label: name of template and is used during create template wizard
    • sling:resourceType defines rendering component to be used
    • jcr:title string that shows up in console when author is creating a new page
    • jcr:description is used for documentation and description of template
    • ranking order in which template will appear
    • allowedPaths are paths in jcr where this template can be used
    • allowedParents are paths in jcr where templates are allowed to be parent to this template
    • allowedChildren are paths in jcr where templates are allowed to be children to this template
    • thumbnail.png image for author to identify template

Create AEM Template and Page using Template

  • Create a template in crxde under /apps/training/templates folder by right click on folder and cfreate -> create template
  • Enter label, title, descriptio, resourceType, ranking
  • Define allowed paths and enter /content(/.*)? for allowing anywhere under content
  • Avoid any parent and children for now
  • Save All
  • This creates new template with properties but does not have sling:resourceType; jcr:content has a sling:resourceType

Restrict Template Use

There are two ways to restrict template use:

  • On the template: use allowedPaths property on the template
  • On the content: Templates that may be used by a page using cq:allowTemplates property on a page

You can also add content to the template. This is to premake template to bring consistency across pages and reduce content author rework.

Introduction to HTL

HTL stands for HTML Template Language developed by Adobe to offer a highly productive enterprise-lvel web framework that increases security, and allows HTML developers without Java knowledge to better participate in AEM projects. It is used for redering components more dynamically. HTL provide two syntaxes block statements and HTL expressions.

An HTL template defines an HTML output stream by specifying the presentation logic and the values to be dynamically inserted into the stream based on backend business logic. It was made to make development more productive at the enterprise level. It is also a best practice to use HTL instead of JSP, and it might be good to know that the AEM reference site We.Retail is built using HTL.

HTL differs from other templating languages in four key ways:
HTML5: HTL specific syntax is expressed within a data attribute or within HTML text.
Separation of concerns between web designer and web develper. HTL’s use API for external help
Secure as it filters and avoids cross site vulnerabolities
Compatibility with JSP or ESP

Goals of HTL is to simplify development and provide automatic security.

HTL Syntax

There are two types of HTL syntax that can be used in our rendering scripts.

Block Statements:

Defines structural elements within the template and employs HTML5 data attributes. All HTL specific attributes are prefixed with data-sly-*.

Block statement examples:

Expressions

These are delimited by ${ }. At runtime these expressions are evaluated and their value is injected in outgoing HTML stream. These expressions can occur within the HTML text nodes, or within the attribute values. They can be literals or variables.

Expression examples:

Rendering Basic Page Content

In the repository, the nodes define the structure, and the properties hold the data. To render content on any page, we need to render the data from those properties. Without having to specify anything, HTL provides access to many helpful objects that were commonly only available in JSP after including a global.jsp file. These objects are in addition to any that might be introduced through the use API, and some are enumerable, while others are backed by Java. These globally available objects are:

Enumerable

The enumerable objects provide convenient access to commonly used information, that is the properties object, the pageProperties object, and the inheritedPageProperties object. Their content can be accessed with a dot notation, and they can be iterated through using data-sly-list.

  • properties
  • pageProperties
  • inheritedPageProperties

Java Backend

We also have access to a handful of objects backed by Java.  

  • component
  • currentDesign
  • currentPage
  • currentSession
  • request – response
  • resource
  • wcmmode

Modularize Page Components

Modularize a component into multiple scripts and include them at runtime. This is achieved by using data-sly-include attribute to modularize our rendering component so it’s easier to work with, promotes component or scripts reuse and reduces code redundancy. 

Inheritance

Components in AEM can be given hierarchical structure to implement the inheritance of script files, dialog boxes and other elements. Therefore it is possible for a specific component to inherit from a base component. The three hierarchies in components are subject to:

  1. Resource Type Hierarchy: Extend using sling:resourceSuperType
  2. Container Hierarchy: Used to populate configuration settings to child component and typically used in responsive grid scenario. cq:edit or cq:childEdit config node on a component
  3. Include Hierarchy: Imposed at run time by the sequence of includes. Primarily used by designer which acts as based for rendering including layout. It also includes css information and components available to responsive grid.

Developing Structure Components

Developing structure components for a website by learning about:

  • Designer: Add a globally available design and style to a website through css, client libraries, images, fonts. Also create dialog that can store content that is accessible to other page. We can also set design at page level so that pages that use same design have access to common css files defining the formats of specific areas of components or other shared featured.
    • Create a design in etc -> designs folder in CRXDE, this is the location that is globally accessible to all our pages. 
    • Create a new node, enter name and type = cq:page
    • Create another node under this page as every cq:page needs a node. Create this node with type = cq:pageContent
  • Key difference between structure components vs. content components is that authors can remove content components while they cannot remove structure components while both are editable by content authors. Also, content component is used in responsive grid while structure component is embedded using data-sly-resource
  • Expand navigation functionality to be responsive and use back end logic to generate its content dynamically, this is done using data-sly-use tag to either use back end java or java script file.
  • Add and view log messages to a component to a script to easily debug what we are working on. AEM offers possibility to configure global parameters for central logging service. We can also configure request data logging and also a custom logging. AEM and CRXDE implement Apache Log4J framework which is designed to provide easy to use logging solution. There are five levels of logs for debugging – trace, debug, info, warn and error. Logs are located on server in CRX quickstart/logs folder. We can also download them in tools section of AEM’s navigation under operations diagnosis. 
  • Create title component and build dialog boxes for authors to use to add content to website page. There are two types of dialog boxes available – classic and touch optimized/ Touch UI. All the elements that can be used for dialog boxes are saved in JCR under libs -> granite -> ui -> Components -> Foundation -> Form. Root dialog box is in cq -> gui-> components -> authoring -> dialog. Also, we can copy cq:dialog nodes from foundation components available in libs foundation components, this will help build our own dialog boxes.
  • Learn how to use cq:EditConfig node to configure content input actions like inplace editing. 
  • Build a component and design dialog to store content that is accessible to every page of website

Useful Links:

Getting started with HTL

HTL Global Objects

AEM 6.3 API

HTL Specifications

Apache Sling

PluralSight Adobe Experience Manager Learning Course