Article summary

Summary

Discusses how to develop an AEM HTML Template Language (HTL - formerly known as Sightly) component that renders a newsletter whose content can be set by an AEM author using a Touch UI dialog.  

Covers the following points:

  • how to build a responsive HTL component that renders a newsletter. 
  • how to create custom application logic in the component so all of the component is displayed in the Touch UI while editing. By default, if the component hieght is over a certain size, it may be cutoff in the Touch UI.
  • how to use a multi-field control to populate the body of a newsletter.

A special thank you to Lokesh BS, community member of the year for 2015 and 2016, for contributing code towards this community article. Also, a special thank you to community members Ranta Kumar Kotla for testing this Community Article to ensure it works.

HTL is the AEM template language that can be used to replace use of JSP when developing an AEM component. HTL helps you to separate your design from your application logic. For more information, see Introduction to the HTML Template Language.

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, JavaScript, HTML
Version Adobe Experience Manager 6.2
Video https://youtu.be/qZOsg8JOT6M

Note:

You can download an AEM package that contains the code used in this article. Download the package and deploy using package manager. The purpose of this code is to show the community these concepts in action. That is, it's to illustrate how to write a HTL component that renders a newsletter. This community code is for teaching purposes only and not meant to go into production as is.

You can view the sample community application by using the following URL: http://localhost:4502/editor.html/content/aem_newsletter.html (assuming you deploy on author). You can view the newsletter at: http://localhost:4502/content/aem_newsletter.html.

Download

Note:

This component is not supported in the Classic UI.

Additional AEM HTL Articles

Ask the AEM Community Experts Sessions on HTL (used to be known as Sightly)

Introduction

You can create an Adobe Experience Manager HTL component that renders a newsletter that you can distribute to an audience. For example, consider a digital marketer that wants to promote events around a specific product. By creating an AEM newsletter, they can raise awareness of the product.

As an AEM developer, you can create an AEM HTL component that lets an author set all content for a newsletter, including images, text, links to other content such as videos, and so on. The following illustration shows the newsletter created in this development article. 

newsletter
An AEM Newsletter created from an HTL component

As shown in the previous illustration, the HTL component renders a newsletter that consists of these sections:

  • text and image shown at the start of the newsletter
  • text that provides a summary of the newsletter
  • a repeating data section that contains the body of the newsletter. There can be many sections under the current issue section.
  • a section that lists previous editions

Content for each section is set by using a different tab in the Touch UI dialog. The following illustration shows the first tab that populates the text and image section. 

TextTab
HTL Component Touch UI dialog that lets an author enter information that is displayed

This development article steps you through how to build an AEM 6.2 HTL component by using an AEM Maven Archetype 10 project. That is, the Maven Archetype 10 project is used to build the OSGi bundle that is used with the  HTL Newsletter component. This HTL component uses a Java class that extends com.adobe.cq.sightly.WCMUsePojo.

Note:

The Java class com.adobe.cq.sightly.WCMUse is deprecated.

Create an application folder structure

Create an application folder structure that contains templates, components, and pages by using CRXDE Lite.

Structure
Adobe Experience Manager application folder structure

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on. 
  • components: contains components that your application uses. 
  • page: contains page components. A page component is a script such as a JSP file.
  • global: contains global components that your application uses.
  • template: contains templates on which you base page components. 
  • src: contains source code that comprises an OSGi component (this development article does not create an OSGi bundle using this folder). 
  • install: contains a compiled OSGi bundles container.

To create an application folder structure:

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter newsletter
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button.

Create a template

You can create a template by using CRXDE Lite. A CQ template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. Go to Select CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
2. Right-click the template folder (within your application), select Create, Create
Template.
3. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter news
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter newsletter/components/page/news.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

4. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.
5. Click Next for Allowed Parents.
6. Select OK on Allowed Children.

Create a Page Rendering Component

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. Go to Select CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
2. Right-click /apps/newsletter/components/page, then select Create, Create Component.
3. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter news
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type: foundation/components/page 

4. Select Next for Advanced Component Settings and Allowed Parents.
5. Select OK on Allowed Children.
6. Open the news.jsp located at: /apps/newsletter/components/page/news/news.jsp.
7. Enter the following JSP code.

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
   
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Setup Maven in your development environment

You can use Maven to build an OSGi bundle that contains a Sling Servlet. Maven manages required JAR files that a Java project needs in its class path. Instead of searching the Internet trying to find and download third-party JAR files to include in your project’s class path, Maven manages these dependencies for you.

You can download Maven 3 from the following URL:

http://maven.apache.org/download.html

After you download and extract Maven, create an environment variable named M3_HOME. Assign the Maven install location to this environment variable. For example:

C:\Programs\Apache\apache-maven-3.0.4

Set up a system environment variable to reference Maven. To test whether you properly setup Maven, enter the following Maven command into a command prompt:

%M3_HOME%\bin\mvn -version

This command provides Maven and Java install details and resembles the following message:

Default locale: en_US, platform encoding: Cp1252
OS name: "windows 7", version: "6.1", arch: "amd64", family: "windows"

Note:

It is recommended that you use Maven 3.0.3 or greater. For more information about setting up Maven and the Home variable, see: Maven in 5 Minutes.

Next, copy the Maven configuration file named settings.xml from [install location]\apache-maven-3.0.4\conf\ to your user profile. For example, C:\Users\scottm\.m2\.

You have to configure your settings.xml file to use Adobe’s public repository. For information, see Adobe Public Maven Repository at http://repo.adobe.com/.

The following XML code represents a settings.xml file that you can use.

<?xml version="1.0" encoding="UTF-8"?>
 
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at
 
    http://www.apache.org/licenses/LICENSE-2.0
 
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->
 
<!--
 | This is the configuration file for Maven. It can be specified at two levels:
 |
 |  1. User Level. This settings.xml file provides configuration for a single user, 
 |                 and is normally provided in ${user.home}/.m2/settings.xml.
 |
 |                 NOTE: This location can be overridden with the CLI option:
 |
 |                 -s /path/to/user/settings.xml
 |
 |  2. Global Level. This settings.xml file provides configuration for all Maven
 |                 users on a machine (assuming they're all using the same Maven
 |                 installation). It's normally provided in 
 |                 ${maven.home}/conf/settings.xml.
 |
 |                 NOTE: This location can be overridden with the CLI option:
 |
 |                 -gs /path/to/global/settings.xml
 |
 | The sections in this sample file are intended to give you a running start at
 | getting the most out of your Maven installation. Where appropriate, the default
 | values (values used when the setting is not specified) are provided.
 |
 |-->
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
  <!-- localRepository
   | The path to the local repository maven will use to store artifacts.
   |
   | Default: ~/.m2/repository
  <localRepository>/path/to/local/repo</localRepository>
  -->
 
  <!-- interactiveMode
   | This will determine whether maven prompts you when it needs input. If set to false,
   | maven will use a sensible default value, perhaps based on some other setting, for
   | the parameter in question.
   |
   | Default: true
  <interactiveMode>true</interactiveMode>
  -->
 
  <!-- offline
   | Determines whether maven should attempt to connect to the network when executing a build.
   | This will have an effect on artifact downloads, artifact deployment, and others.
   |
   | Default: false
  <offline>false</offline>
  -->
 
  <!-- pluginGroups
   | This is a list of additional group identifiers that will be searched when resolving plugins by their prefix, i.e.
   | when invoking a command line like "mvn prefix:goal". Maven will automatically add the group identifiers
   | "org.apache.maven.plugins" and "org.codehaus.mojo" if these are not already contained in the list.
   |-->
  <pluginGroups>
    <!-- pluginGroup
     | Specifies a further group identifier to use for plugin lookup.
    <pluginGroup>com.your.plugins</pluginGroup>
    -->
  </pluginGroups>
 
  <!-- proxies
   | This is a list of proxies which can be used on this machine to connect to the network.
   | Unless otherwise specified (by system property or command-line switch), the first proxy
   | specification in this list marked as active will be used.
   |-->
  <proxies>
    <!-- proxy
     | Specification for one proxy, to be used in connecting to the network.
     |
    <proxy>
      <id>optional</id>
      <active>true</active>
      <protocol>http</protocol>
      <username>proxyuser</username>
      <password>proxypass</password>
      <host>proxy.host.net</host>
      <port>80</port>
      <nonProxyHosts>local.net|some.host.com</nonProxyHosts>
    </proxy>
    -->
  </proxies>
 
  <!-- servers
   | This is a list of authentication profiles, keyed by the server-id used within the system.
   | Authentication profiles can be used whenever maven must make a connection to a remote server.
   |-->
  <servers>
    <!-- server
     | Specifies the authentication information to use when connecting to a particular server, identified by
     | a unique name within the system (referred to by the 'id' attribute below).
     | 
     | NOTE: You should either specify username/password OR privateKey/passphrase, since these pairings are 
     |       used together.
     |
    <server>
      <id>deploymentRepo</id>
      <username>repouser</username>
      <password>repopwd</password>
    </server>
    -->
     
    <!-- Another sample, using keys to authenticate.
    <server>
      <id>siteServer</id>
      <privateKey>/path/to/private/key</privateKey>
      <passphrase>optional; leave empty if not used.</passphrase>
    </server>
    -->
  </servers>
 
  <!-- mirrors
   | This is a list of mirrors to be used in downloading artifacts from remote repositories.
   | 
   | It works like this: a POM may declare a repository to use in resolving certain artifacts.
   | However, this repository may have problems with heavy traffic at times, so people have mirrored
   | it to several places.
   |
   | That repository definition will have a unique id, so we can create a mirror reference for that
   | repository, to be used as an alternate download site. The mirror site will be the preferred 
   | server for that repository.
   |-->
  <mirrors>
    <!-- mirror
     | Specifies a repository mirror site to use instead of a given repository. The repository that
     | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
     | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
     |
    <mirror>
      <id>mirrorId</id>
      <mirrorOf>repositoryId</mirrorOf>
      <name>Human Readable Name for this Mirror.</name>
      <url>http://my.repository.com/repo/path</url>
    </mirror>
     -->
  </mirrors>
   
  <!-- profiles
   | This is a list of profiles which can be activated in a variety of ways, and which can modify
   | the build process. Profiles provided in the settings.xml are intended to provide local machine-
   | specific paths and repository locations which allow the build to work in the local environment.
   |
   | For example, if you have an integration testing plugin - like cactus - that needs to know where
   | your Tomcat instance is installed, you can provide a variable here such that the variable is 
   | dereferenced during the build process to configure the cactus plugin.
   |
   | As noted above, profiles can be activated in a variety of ways. One way - the activeProfiles
   | section of this document (settings.xml) - will be discussed later. Another way essentially
   | relies on the detection of a system property, either matching a particular value for the property,
   | or merely testing its existence. Profiles can also be activated by JDK version prefix, where a 
   | value of '1.4' might activate a profile when the build is executed on a JDK version of '1.4.2_07'.
   | Finally, the list of active profiles can be specified directly from the command line.
   |
   | NOTE: For profiles defined in the settings.xml, you are restricted to specifying only artifact
   |       repositories, plugin repositories, and free-form properties to be used as configuration
   |       variables for plugins in the POM.
   |
   |-->
  <profiles>
    <!-- profile
     | Specifies a set of introductions to the build process, to be activated using one or more of the
     | mechanisms described above. For inheritance purposes, and to activate profiles via <activatedProfiles/>
     | or the command line, profiles have to have an ID that is unique.
     |
     | An encouraged best practice for profile identification is to use a consistent naming convention
     | for profiles, such as 'env-dev', 'env-test', 'env-production', 'user-jdcasey', 'user-brett', etc.
     | This will make it more intuitive to understand what the set of introduced profiles is attempting
     | to accomplish, particularly when you only have a list of profile id's for debug.
     |
     | This profile example uses the JDK version to trigger activation, and provides a JDK-specific repo.
    <profile>
      <id>jdk-1.4</id>
 
      <activation>
        <jdk>1.4</jdk>
      </activation>
 
      <repositories>
        <repository>
          <id>jdk14</id>
          <name>Repository for JDK 1.4 builds</name>
          <url>http://www.myhost.com/maven/jdk14</url>
          <layout>default</layout>
          <snapshotPolicy>always</snapshotPolicy>
        </repository>
      </repositories>
    </profile>
    -->
 
    <!--
     | Here is another profile, activated by the system property 'target-env' with a value of 'dev',
     | which provides a specific path to the Tomcat instance. To use this, your plugin configuration
     | might hypothetically look like:
     |
     | ...
     | <plugin>
     |   <groupId>org.myco.myplugins</groupId>
     |   <artifactId>myplugin</artifactId>
     |   
     |   <configuration>
     |     <tomcatLocation>${tomcatPath}</tomcatLocation>
     |   </configuration>
     | </plugin>
     | ...
     |
     | NOTE: If you just wanted to inject this configuration whenever someone set 'target-env' to
     |       anything, you could just leave off the <value/> inside the activation-property.
     |
    <profile>
      <id>env-dev</id>
 
      <activation>
        <property>
          <name>target-env</name>
          <value>dev</value>
        </property>
      </activation>
 
      <properties>
        <tomcatPath>/path/to/tomcat/instance</tomcatPath>
      </properties>
    </profile>
    -->
   
 
<profile>
 
                <id>adobe-public</id>
 
                <activation>
 
                    <activeByDefault>true</activeByDefault>
 
                </activation>
 
                <repositories>
 
                  <repository>
 
                    <id>adobe</id>
 
                    <name>Nexus Proxy Repository</name>
 
                    <url>http://repo.adobe.com/nexus/content/groups/public/</url>
 
                    <layout>default</layout>
 
                  </repository>
 
                </repositories>
 
                <pluginRepositories>
 
                  <pluginRepository>
 
                    <id>adobe</id>
 
                    <name>Nexus Proxy Repository</name>
 
                    <url>http://repo.adobe.com/nexus/content/groups/public/</url>
 
                    <layout>default</layout>
 
                  </pluginRepository>
 
                </pluginRepositories>
 
            </profile>
 
</profiles>
 
  <!-- activeProfiles
   | List of profiles that are active for all builds.
   |
  <activeProfiles>
    <activeProfile>alwaysActiveProfile</activeProfile>
    <activeProfile>anotherAlwaysActiveProfile</activeProfile>
  </activeProfiles>
  -->
</settings>

Note:

The Adobe repository URL is now made secured. Change http://repo.adobe.com/nexus/content/groups/public/ to https://repo.adobe.com/nexus/content/groups/public/.

Create an AEM Maven 10 archetype project

You can create an Experience Manager archetype project by using the Maven archetype plugin. In this example, assume that the working directory is C:\AdobeCQ.

files
Maven Archetype 10 generated files

The following list describes the Archetype 10 project arguments:

  • groupId - Base Maven groupId
  • artifactId - Base Maven ArtifactId
  • version - the version of your project
  • package - Java Source Package
  • appsFolderName - /apps folder name
  • artifactName - Maven Project Name
  • componentGroupName - AEM component group name
  • contentFolderName - /content folder name
  • cssId - prefix used in generated css
  • packageGroup - Content Package Group name
  • siteName - AEM site name

To create an Experience Manager archetype project, perform these steps:

1. Open the command prompt and go to your working directory (for example, C:\AdobeCQ).

2. Run the following Maven command:

mvn archetype:generate -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=10 -DarchetypeRepository=https://repo.adobe.com/nexus/content/groups/public/

3. When prompted, specify the following information:

  • groupId - newsHTL
  • artifactId - newsHTL
  • version - 1.0-SNAPSHOT
  • package - org.adobeaemclub.chexample
  • appsFolderName - newsHTL
  • artifactName - newsHTL
  • componentGroupName - newsHTL
  • contentFolderName - newsHTL
  • cssId - newsHTL
  • packageGroup - newsHTL
  • siteName - newsHTL

4. WHen prompted, specify Y.

5. Once done, you will see a message like:

[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 01:42 min
[INFO] Finished at: 2016-04-25T14:34:19-04:00
[INFO] Final Memory: 16M/463M
[INFO] ------------------------------------------------------------------------

6. Change the working directory to newsHTL and then enter the following command.

mvn eclipse:eclipse

After you run this command, you can import the project into Eclipse as discussed in the next section.

Add Java files to the Maven project using Eclipse

To make it easier to work with the Maven generated project, import it into the Eclipse development environment, as shown in the following illustration.

Project
Eclipse Import Project Dialog

The Eclipse project that you work in to build the OSGi bundle that uses HTL API is newsHTL.core. You do not have to work in the other projects under newsHTL. 

Note:

Do not worry about the errors reported in Eclipse. It does not read the POM file where the APIs are resolved. You build the bundle with Maven. Eclipse is used to edit the Java files and the POM file. 

The next step is to add a package named org.adobeaemclub.chexample.core.sightly.models. Add the following four Java files to this package:

  • IssueBean- stores values used in the multifield and displayed in the HTL front end 
  • IssuesMultiBean- main Java class that extends WCMUsePojo
  • NewsArchiveBean - stores data members for the arcieve section of the newsletter
  • NewsArchiveMultiBean - controls application logic for the Achieve section of the newsletter

 

IssueBean class

The IssueBean class is simply a getter and setter class that stores values that an author enters into the multi-field control. There is a class member for each field in the multi-field control. The following Java code represents the IssueBean class.

package org.adobeaemclub.chexample.core.sightly.models;

public class IssueBean {
	
    private String page;    

    private String path;
    
    private String desc;

    public String getDesc() {
		return desc;
	}

	public void setDesc(String desc) {
		this.desc = desc;
	}

	public String getPage() {

        return page;

    }

    public void setPage(String page) {

        this.page = page;

    }

    public String getPath() {

        return path;

    }

    public void setPath(String path) {

        this.path = path;

    }    

}

IssuesMultiBean class

The IssuesMultiBean class is the Java server-side part of the AEM HTL component. This class extends the WCMUsePojo class. You override the activate method in this class. This class reads the values that an author enters in the HTL dialog. Notice the following data member.

List<IssueBean> lBean

This List object is used to store the Multifield values that an author enters. Each element in the List is an IssueBean object. THis is how you work with Multifield dailogs within an HTL component. The following Java code represents the IssuesMultiBean class. 

package org.adobeaemclub.chexample.core.sightly.models;

import java.util.ArrayList;
import java.util.List;

import javax.jcr.Node;
import javax.jcr.PathNotFoundException;
import javax.jcr.Property;
import javax.jcr.RepositoryException;
import javax.jcr.Value;
import javax.jcr.ValueFormatException;

import org.apache.sling.commons.json.JSONException;
import org.apache.sling.commons.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.adobe.cq.sightly.WCMUsePojo;

public class IssuesMultiBean extends WCMUsePojo{
 
	private final Logger logger = LoggerFactory.getLogger(IssuesMultiBean.class);
 
    private IssueBean iBean = null;
 
    private List<IssueBean> lBean = null;
 
 
    public List<IssueBean> getLBean() {
    	 return this.lBean;
	}
    
    public void setLBean(List<IssueBean> items) {    	 
        this.lBean = items; 
    }


	@Override 
    public void activate() throws Exception {
 
        Node currentNode = getResource().adaptTo(Node.class); 
        String currentItem = "iItems";
        logger.info("Current Node : " + currentNode); 
        if(currentNode.hasProperty(currentItem)){ 
            setItems(currentNode, currentItem);  
        } 
    }        
 
    private void setItems(Node currentNode, String tab) throws PathNotFoundException, RepositoryException, ValueFormatException, JSONException {
        Value[] value;
 
        JSONObject jObj; 
        Property currentProperty; 
        lBean = new ArrayList<IssueBean>();
 
        currentProperty = currentNode.getProperty(tab);
        logger.info("Current Property : " + currentProperty );
 
        if(currentProperty.isMultiple()){         
 
            value = currentProperty.getValues();            
 
        }else{
 
            value = new Value[1]; 
            value[0] = currentProperty.getValue();            
 
        }
        logger.info("Current Value : " + value.length );
        
        for (int i = 0; i < value.length; i++) {
 
            jObj = new JSONObject(value[i].getString());            
            iBean = new IssueBean();            
            iBean.setPage(jObj.getString("issueTitle"));            
            iBean.setPath(jObj.getString("path"));
            iBean.setDesc(jObj.getString("issueDesc"));
            lBean.add(iBean);                    
 
        }   
        
        setLBean(lBean);
       
    }

}

NewsArchiveBean class

The NewsArchiveBean class stores data required for the Archive section of the newsletter. For example, it stores a link to a previous edition. The following Java represents this class. 

package org.adobeaemclub.chexample.core.sightly.models;

public class NewsArchiveBean {
	
    private String pageTitle;    

    private String path;
   


	public String getPageTitle() {

        return pageTitle;

    }

    public void setPageTitle(String pageTitle) {

        this.pageTitle = pageTitle;

    }

    public String getPath() {

        return path;

    }

    public void setPath(String path) {

        this.path = path;

    }    


}

NewsArchiveMultiBean

This class is responsible to returning a data set that is populated in the newsletter Archive section. An AEM author uses a Multi-field control to specify data that points to previous editions of the AEM newsletter. The following Java code represents this class. 

package org.adobeaemclub.chexample.core.sightly.models;

import java.util.ArrayList;
import java.util.List;

import javax.jcr.Node;
import javax.jcr.PathNotFoundException;
import javax.jcr.Property;
import javax.jcr.RepositoryException;
import javax.jcr.Value;
import javax.jcr.ValueFormatException;

import org.apache.sling.commons.json.JSONException;
import org.apache.sling.commons.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.adobe.cq.sightly.WCMUsePojo;

public class NewsArchiveMultiBean extends WCMUsePojo{
 
	private final Logger logger = LoggerFactory.getLogger(NewsArchiveMultiBean.class);
 
    private NewsArchiveBean nBean = null;
 
    private List<NewsArchiveBean> lnBean = null;
 
 
    public List<NewsArchiveBean> getLnBean() {
    	 return this.lnBean;
	}
    
    public void setLBean(List<NewsArchiveBean> items) {    	 
        this.lnBean = items; 
    }


	@Override 
    public void activate() throws Exception {
 
        Node currentNode = getResource().adaptTo(Node.class); 
        String currentItem = "naItems";
        logger.info("NewsArchiveMultiBean Current Node : " + currentNode); 
        if(currentNode.hasProperty(currentItem)){ 
            setItems(currentNode, currentItem);  
        } 
    }        
 
    private void setItems(Node currentNode, String tab) throws PathNotFoundException, RepositoryException, ValueFormatException, JSONException {
        Value[] value;
 
        JSONObject jObj; 
        Property currentProperty; 
        lnBean = new ArrayList<NewsArchiveBean>();
 
        currentProperty = currentNode.getProperty(tab);
        logger.info("NewsArchiveMultiBean Current Property : " + currentProperty );
 
        if(currentProperty.isMultiple()){         
 
            value = currentProperty.getValues();            
 
        }else{
 
            value = new Value[1]; 
            value[0] = currentProperty.getValue();            
 
        }
        logger.info("NewsArchiveMultiBean Current Value : " + value.length );
        
        for (int i = 0; i < value.length; i++) {
 
            jObj = new JSONObject(value[i].getString());            
            nBean = new NewsArchiveBean();            
            nBean.setPageTitle(getPageManager().getPage(jObj.getString("newspath")).getTitle());            
            nBean.setPath(jObj.getString("newspath")+".html");
            lnBean.add(nBean);                    
 
        }   
        
        setLBean(lnBean);
       
    }

}

Modify the Maven POM file

Add the following POM dependency to the POM file located at C:\AdobeCQ\newsHTL.

<dependency>
               <groupId>com.adobe.aem</groupId>
               <artifactId>uber-jar</artifactId>
               <version>6.2.0</version>
               <!-- for AEM6.1 use this version     : <version>6.1.0</version> -->
               <!-- for AEM6.1 SP1 use this version : <version>6.1.0-SP1-B0001</version> -->
               <!-- for AEM6.1 SP2 use this version : <version>6.1.0-SP2</version> -->
               <!-- for AEM6.2 use this version     : <version>6.2.0</version> -->
               <classifier>obfuscated-apis</classifier>
               <scope>provided</scope>
           </dependency>
            
           <dependency>
               <groupId>org.apache.geronimo.specs</groupId>
               <artifactId>geronimo-atinject_1.0_spec</artifactId>
               <version>1.0</version>
               <scope>provided</scope>
           </dependency>

You need to modify two POM files. The first one is the parent POM file shown in this illustration.

ParentPOM
Parent POM

Add the dependency shown above to the Parent POM file. Next, modify the POM file located at C:\AdobeCQ\newsHTL\core. The following code represents this POM file. 

<?xml version="1.0" encoding="UTF-8"?>
<!--
 |  Copyright 2015 Adobe Systems Incorporated
 |
 |  Licensed under the Apache License, Version 2.0 (the "License");
 |  you may not use this file except in compliance with the License.
 |  You may obtain a copy of the License at
 |
 |      http://www.apache.org/licenses/LICENSE-2.0
 |
 |  Unless required by applicable law or agreed to in writing, software
 |  distributed under the License is distributed on an "AS IS" BASIS,
 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 |  See the License for the specific language governing permissions and
 |  limitations under the License.
-->
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>repeatHTL</groupId>
        <artifactId>repeatHTL</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>repeatHTL.core</artifactId>
    <packaging>bundle</packaging>
    <name>repeatHTL - Core</name>
    <description>Core bundle for repeatHTL</description>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-scr-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-bundle-plugin</artifactId>
                <extensions>true</extensions>
                <configuration>
                    <instructions>
                        <!--
                        <Embed-Dependency>
                            artifactId1,
                            artifactId2;inline=true
                        </Embed-Dependency>
                        -->
                        <Sling-Model-Packages>
                            com.communities.aem.core
                        </Sling-Model-Packages>
                    </instructions>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <profiles>
        <!-- Development profile: install only the bundle -->
        <profile>
            <id>autoInstallBundle</id>
            <activation>
                <activeByDefault>false</activeByDefault>
            </activation>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.apache.sling</groupId>
                        <artifactId>maven-sling-plugin</artifactId>
                        <configuration>
                            <!-- Note that this requires /apps/repeatHTL/install to exist!!          -->
                            <!--    This is typically the case when ui.apps is deployed first                -->
                            <!--    Otherwise, create /apps/repeatHTL/install manually (CRXDE|Lite)  -->
                            <slingUrlSuffix>/apps/repeatHTL/install/</slingUrlSuffix>
                            <failOnError>true</failOnError>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
    <dependencies>
        <!-- OSGi Dependencies -->
            <!-- OSGi Dependencies -->
         <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>obfuscated-apis</classifier>
        </dependency>
 
        <dependency>
            <groupId>org.apache.geronimo.specs</groupId>
            <artifactId>geronimo-atinject_1.0_spec</artifactId>
        </dependency>
        <dependency>
    <groupId>org.apache.sling</groupId>
    <artifactId>org.apache.sling.commons.json</artifactId>
    <version>2.0.18</version>
</dependency>
        <dependency>
            <groupId>org.apache.felix</groupId>
            <artifactId>org.apache.felix.scr</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.felix</groupId>
            <artifactId>org.apache.felix.scr.annotations</artifactId>
        </dependency>
        <dependency>
            <groupId>biz.aQute</groupId>
            <artifactId>bndlib</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.compendium</artifactId>
        </dependency>
        <!-- Other Dependencies -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.jcr</groupId>
            <artifactId>jcr</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
        </dependency>
        <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>aem-api</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.sling</groupId>
            <artifactId>org.apache.sling.models.api</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mockito</groupId>
            <artifactId>mockito-all</artifactId>
        </dependency>
        <dependency>
            <groupId>junit-addons</groupId>
            <artifactId>junit-addons</artifactId>
        </dependency>
    </dependencies>
</project>

Build the OSGi bundle using Maven

To build the OSGi bundle by using Maven, perform these steps:

  1. Open the command prompt and go to the C:\AdobeCQ\newsHTL.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\newsHTL\core\target. The file name of the OSGi component is newsHTL.core-1.0-SNAPSHOT.jar.

The command -PautoInstallPackage automatically deploys the OSGi bundle to AEM.

Create an AEM HTL component

Perform these tasks using CRXDE Lite:

1. Right click on /apps/newsletter/components and then select New, Component.

2. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter tab-component.
  • Title: The title that is assigned to the component. Enter tab-component.
  • Description: The description that is assigned to the template. Enter tab-component.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter General. (The component is located under the General heading in the Touch UI side rail.)

3. Click Ok.

Once done, you will see the component as shown in the following illustration. 

crx
The HTL component

Note:

For information about the default files created by the Maven 10 Archetype project, see this community article: Creating your first AEM 6.2 Project using Adobe Maven Archetype 10.

Add a dialog to the HTL component

A dialog lets an author click on the component in the Touch UI (or Classic UI) view during design time and enter values that are used by the component. The component created in this development article lets the AEM author enter information under various tabs. 

dialog
Dialog for the HTL component

The following illustration shows the JCR nodes for this component.

jcrnodes
JCR Nodes that create the dialog

To learn how to use CRXDE lite to build a Touch UI dialog, see Create the Touch UI Dialog section in Creating an Adobe Experience Manager HTML Template Language component that uses the WCMUsePojo API.

Note:

Install the package shown at the start of this article to get the JCR nodes that create the Touch UI dialog. 

Create a ClientLibs folder

Create the clientlibs folder at the following JCR location:

/apps/newsletter/components/tab-component

Assign the value cq.authoring.dialog to the clientlibs category property.

The purpose of this clientlibs folder is to store a JS script file, named nested-multifield.js, that creates and fills the nested multifield controls with data. This is an example of how you can programmatically work with Granite data types. For information, see Granite UI’s documentation.

The following JS logic is located in the nested-multifield.js file.

(function () {
    var DATA_EAEM_NESTED = "data-eaem-nested";
    var CFFW = ".coral-Form-fieldwrapper";

    //reads multifield data from server, creates the nested composite multifields and fills them
    function addDataInFields() {
        $(document).on("dialog-ready", function() {
            var $fieldSets = $("[" + DATA_EAEM_NESTED + "][class='coral-Form-fieldset']");

            if(_.isEmpty($fieldSets)){
                return;
            }

            var mNames = [];

            $fieldSets.each(function (i, fieldSet) {
                mNames.push($(fieldSet).data("name"));
            });

            mNames = _.uniq(mNames);

            var actionUrl = $fieldSets.closest("form.foundation-form").attr("action") + ".json";

            $.ajax(actionUrl).done(postProcess);

            function postProcess(data){
                _.each(mNames, function(mName){
                    buildMultiField(data, mName);
                });
            }

            //creates & fills the nested multifield with data
            function fillNestedFields($multifield, valueArr){
                _.each(valueArr, function(record, index){
                    $multifield.find(".js-coral-Multifield-add").click();

                    //a setTimeout may be needed
                    _.each(record, function(value, key){
                        var $field = $($multifield.find("[name='./" + key + "']")[index]);
                        $field.val(value);
                    })
                })
            }

            function buildMultiField(data, mName){
                if(_.isEmpty(mName)){
                    return;
                }

                $fieldSets = $("[data-name='" + mName + "']");

                //strip ./
                mName = mName.substring(2);

                var mValues = data[mName], $field, name;

                if(_.isString(mValues)){
                    mValues = [ JSON.parse(mValues) ];
                }

                _.each(mValues, function (record, i) {
                    if (!record) {
                        return;
                    }

                    if(_.isString(record)){
                        record = JSON.parse(record);
                    }

                    _.each(record, function(rValue, rKey){
                        $field = $($fieldSets[i]).find("[name='./" + rKey + "']");

                        if(_.isArray(rValue) && !_.isEmpty(rValue)){
                            fillNestedFields( $($fieldSets[i]).find("[data-init='multifield']"), rValue);
                        }else{
                            $field.val(rValue);
                        }
                    });
                });
            }
        });
    }

    function fillValue($field, record){
        var name = $field.attr("name");

        if (!name) {
            return;
        }

        //strip ./
        if (name.indexOf("./") == 0) {
            name = name.substring(2);
        }

        record[name] = $field.val();

        //remove the field, so that individual values are not POSTed
        $field.remove();
    }

    //for getting the nested multifield data as js objects
    function getRecordFromMultiField($multifield){
        var $fieldSets = $multifield.find("[class='coral-Form-fieldset']");

        var records = [], record, $fields, name;

        $fieldSets.each(function (i, fieldSet) {
            $fields = $(fieldSet).find("[name]");

            record = {};

            $fields.each(function (j, field) {
                fillValue($(field), record);
            });

            if(!$.isEmptyObject(record)){
                records.push(record)
            }
        });

        return records;
    }

    //collect data from widgets in multifield and POST them to CRX as JSON
    function collectDataFromFields(){
        $(document).on("click", ".cq-dialog-submit", function () {
            var $form = $(this).closest("form.foundation-form");
            var $fieldSets = $("[" + DATA_EAEM_NESTED + "][class='coral-Form-fieldset']");
            var record, $fields, $field, name, $nestedMultiField;

            $fieldSets.each(function (i, fieldSet) {
                $fields = $(fieldSet).children().children(CFFW);

                record = {};

                $fields.each(function (j, field) {
                    $field = $(field);

                    //may be a nested multifield
                    $nestedMultiField = $field.find("[data-init='multifield']");

                    if($nestedMultiField.length == 0){
                        fillValue($field.find("[name]"), record);
                    }else{
                        name = $nestedMultiField.find("[class='coral-Form-fieldset']").data("name");

                        if(!name){
                            return;
                        }

                        //strip ./
                        name = name.substring(2);

                        record[name] = getRecordFromMultiField($nestedMultiField);
                    }
                });

                if ($.isEmptyObject(record)) {
                    return;
                }

                //add the record JSON in a hidden field as string
                $('<input />').attr('type', 'hidden')
                    .attr('name', $(fieldSet).data("name"))
                    .attr('value', JSON.stringify(record))
                    .appendTo($form);
            });
        });
    }

    $(document).ready(function () {
        addDataInFields();
        collectDataFromFields();
    });

    //extend otb multifield for adjusting event propagation when there are nested multifields
    //for working around the nested multifield add and reorder
    CUI.Multifield = new Class({
        toString: "Multifield",
        extend: CUI.Multifield,

        construct: function (options) {
            this.script = this.$element.find(".js-coral-Multifield-input-template:last");
        },

        _addListeners: function () {
            this.superClass._addListeners.call(this);

            //otb coral event handler is added on selector .js-coral-Multifield-add
            //any nested multifield add click events are propagated to the parent multifield
            //to prevent adding a new composite field in both nested multifield and parent multifield
            //when user clicks on add of nested multifield, stop the event propagation to parent multifield
            this.$element.on("click", ".js-coral-Multifield-add", function (e) {
                e.stopPropagation();
            });

            this.$element.on("drop", function (e) {
                e.stopPropagation();
            });
        }
    });

    CUI.Widget.registry.register("multifield", CUI.Multifield);
})();

Add HTL code

Add code to the HTML file named tab-component located in the following JCR location:

/apps/newsletter/components/tab-component/tab-component.html

In the HTL file, notice this line of code (around line 370):

<div data-sly-use.ibeanObj="org.adobeaemclub.chexample.core.sightly.models.IssuesMultiBean">

This is how you create an instance of the IssuesMultiBean object.

Add the following HTML to this file.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8"> <!-- utf-8 works for most cases -->
	<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
	<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->

	<!-- Web Font / @font-face : BEGIN -->
	<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
	
	<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
	<!--[if mso]>
		<style>
			* {
				font-family: sans-serif !important;
			}
		</style>
	<![endif]-->
	
	<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
	<!--[if !mso]><!-->
		<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
	<!--<![endif]-->

	<!-- Web Font / @font-face : END -->
	
	<!-- CSS Reset -->
    <style>

		/* What it does: Remove spaces around the email design added by some email clients. */
		/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
        html,
        body {
	        margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
            background-color:#222222 ;
            margin: 0;
            mso-line-height-rule: exactly;
            font-family: adobe-clean, sans-serif; 
        }
        
        /* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        
        center {	        
            width: 100% !important;
            background-color:#222222 ;            
        }
        
        hr {
            color:#4B4B4B;
            border-width: 1px;
        }
        /* What is does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin:0 !important;
        }
        
        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }
                
        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            
            table-layout: fixed !important;
            margin: 0 auto !important;
            cellspacing:0; 
            cellpadding:0;
            align:center;             
            margin: auto;
        }
        
        .element{
            width: 600px;
        }
        table table table {
            table-layout: auto; 
        }
        
        /* What it does: Uses a better rendering method when resizing images in IE. */
        img {
            -ms-interpolation-mode:bicubic;
        }
        
        /* What it does: A work-around for iOS meddling in triggered links. */
        .mobile-link--footer a,
        a[x-apple-data-detectors] {
            color:inherit !important;
            text-decoration: underline !important;
        }

        /* What it does: Prevents underlining the button text in Windows 10 */
        .button-link {
            text-decoration: none !important;
        }
      
        /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
        /* Create one of these media queries for each additional viewport size you'd like to fix */
        /* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
            .email-container {
                min-width: 375px !important;
            }
        }
    
    </style>
    
    <!-- Progressive Enhancements -->
    <style>
        
        /* What it does: Hover styles for buttons */
        .button-td {
            transition: all 100ms ease-in;
            border-radius: 25px; 
            text-align: center;
        }
        
        .button-a {
            transition: all 100ms ease-in;
            background: #009CF9; 
            border: 15px solid #009CF9; 
            font-family: adobe-clean, sans-serif; 
            font-size: 13px; 
            line-height: 1.1; 
            text-align: center; 
            text-decoration: none; 
            display: block; 
            border-radius: 25px; 
            font-weight: bold;
            
        }
        
        .button-tr
        {
            width:auto;
        }
        
        
        
        .button-a:hover {
            background: #009CF9 !important;
            border-color: #009CF9 !important;
            
        }
        
        dd{
            color: #009CF9;
        }
        
        .table-container {
            width:600px;
        }
        
         .image-container {
            
            border:0px ;
            vertical-align: top;
            float:left;
            margin: -90px 0px 0px 90px;
        }
        
        .table-button{
            float:left;
            padding:0px 0px 40px 40px;
        }
        
        .hero-image {
            width:600px; 
            height:300px ;
            border:0px ;
            vertical-align: middle;
            text-align: center; 
            background-position: center !important; 
            background-size: cover !important;
        }
        
        .image-text{
            vertical-align: middle;
            text-align: left; 
            padding: 20px 0px 20px 120px; 
            font-family: adobe-clean, sans-serif; 
            font-size: 15px; 
            line-height: 20px; 
            color: #ffffff;
            background-color: black;
            opacity: 0.6;
            filter: alpha(opacity=60); /* For IE8 and earlier */
            float: left;
            width: 60%;            
        }
        
        .newsedition-text {
            color: #ffdd00;
            font-size: 12px;
        }
        
         .text-right{
            float:right;
        }
        
        .text-td{
            padding: 40px; 
            text-align: left; 
            font-family: adobe-clean, sans-serif; 
            font-size: 15px; 
            line-height: 20px; 
            color: #555555;"
        }
        
        .footer-td{
            padding: 10px 10px 10px 40px;
            width: 100%;
            font-size: 12px; 
            font-family: adobe-clean, sans-serif; 
            line-height:18px; 
            color: #999999;
            background-color: #000000;
        }

        /* Media Queries */
        @media screen and (max-width: 600px) {

            .email-container {
                width: 100% !important;
                margin: auto !important;
            }

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid {
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }
        
            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }

                           
        }

    </style>
    <script>
    	function setIframeHeight(id) {
          var ifrm = parent.document.getElementById(id);
          if (ifrm) {
           var doc = ifrm.contentDocument ? ifrm.contentDocument :
            ifrm.contentWindow.document;
           ifrm.style.visibility = 'hidden';
           ifrm.style.height = "10px"; // reset to minimal height ...
           // IE opt. for bing/msn needs a bit added or scrollbar appears - changed 4 px addition to 10 px due to author instance
           ifrm.style.height = getDocHeight(doc) + "px";
           ifrm.style.visibility = 'visible';
          }
         }
        
        function getDocHeight(doc) {
          doc = doc || document;
          // stackoverflow.com/questions/1145850/
          var body = doc.body,
           html = doc.documentElement;
          var height = Math.max(body.scrollHeight, body.offsetHeight,
           html.clientHeight, html.scrollHeight, html.offsetHeight);
          return height;
         }

    </script>

</head>
<body onload='setIframeHeight("ContentFrame")'>
    <center>

        <!-- Visually Hidden Preheader Text : BEGIN -->
        <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
            (Optional) This text will appear in the inbox preview, but not the email body.
        </div>
        <!-- Visually Hidden Preheader Text : END -->

        
        <!-- Email Body : BEGIN -->
        <table role="presentation" class="email-container table-container">
            
            <!-- Hero Image, Flush : BEGIN -->
          
            
            <tr>
				<td background="https://helpx.adobe.com/content/dam/Adobe/newsletter/newsheader.jpg" alt="alt_text" class="fluid hero-image" > 
                 
                                    <img class="image-container" src="https://helpx.adobe.com/content/dam/help/images/en/adobe.png" width="50" height="80" alt="alt_text" >

                               
                        
                <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">
                    <v:fill type="tile" src="http://placehold.it/600x230/222222/666666" color="#222222" />
                    <v:textbox inset="0,0,0,0">
                    <![endif]-->
                    <div>
                        <table role="presentation" class="table-container">
                            <tr>
                                <td class="image-text">
                                    <h1> ${properties.imagetitle @ context="html"}</h1>
                                    ${properties.imagedesc @ context="html"}
                                    <div class ="newsedition-text" >${properties.newsedition @ context="html"}</div>
                                   
                                </td>
                            </tr>
                        </table>
                        </div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->

				</td>
            </tr>
            <!-- Hero Image, Flush : END -->
            
            

            <!-- 1 Column Text : BEGIN -->
            <tr>
                <td bgcolor="#ffffff" class="text-td">
                     ${properties.text @ context="html"}
                    <br><br>
                    
                </td>
            </tr>
            <!-- 1 Column Text : BEGIN -->
            
              <!-- 1 Column Text : BEGIN -->
            <tr>
                <td bgcolor="#1A1D22" class="text-td">
                    <h2>Current Issue</h2>
                    
                    <div data-sly-use.ibeanObj="org.adobeaemclub.chexample.core.sightly.models.IssuesMultiBean">
                        <p>
                            <div data-sly-test="${!ibeanObj.lBean}">There are no previous additions</div>
                            <div data-sly-test="${ibeanObj.lBean}" data-sly-list.items="${ibeanObj.lBean}">
                                    <p><a href="${items.path}">${items.page}</a></p>    
                                    <p>${items.desc}</p>
                                 <hr>
                            </div>
                        </p>
                    </div>          

                    
                </td>
            </tr>
            <!-- 1 Column Text : BEGIN -->

                      
           

            <!-- 1 Column Text + Button : BEGIN
            <tr>
                <td bgcolor="#0C3F5A">
                    <table role="presentation" >
                    	<tr>
                            <td class="text-td">
                                Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.
                            </td>
							</tr>  -->
                        
                    <!-- Button : Begin
                    <table role="presentation" class="center-on-narrow table-button"  >
                        <tr>
                            <td class="button-td">
                                <a href="http://www.google.com" class="button-a">
                                   <span style="color:#ffffff;">Subscribe Now</span>
                                </a>
                            </td>
                        </tr>
                    </table> -->
                    <!-- Button : END -->
                <!--   </td>
            </tr>
          1 Column Text + Button : BEGIN -->
            
              <!-- 1 Column Text : BEGIN -->
            <tr>
                <td bgcolor="#ffffff" >
                    <table role="presentation" class="table-container" >
                    	<tr>
                            <td  class="text-td">
                               <h2>Newsletter Issue Archive</h2>
                                 <div data-sly-use.nabeanObj="org.adobeaemclub.chexample.core.sightly.models.NewsArchiveMultiBean">
                                    <p>
                                        <div data-sly-test="${!nabeanObj.lnBean}">This is the first edition</div>
                                        <div data-sly-test="${nabeanObj.lnBean}" data-sly-list.items="${nabeanObj.lnBean}">
                                                ${items.pageTitle}
                                            <div class="text-right"><a href="${items.path}" > View Online </a>  </div>                                              
                                             <hr>
                                        </div>
                                    </p>
                                </div>      

                            </td>
							</tr>
                        
                    </table>                    
                </td>
            </tr>
            <!-- 1 Column Text : BEGIN -->

        </table>
        <!-- Email Body : END -->
          
        <!-- Email Footer : BEGIN -->
        <table role="presentation" class="email-container table-container">
            <tr>
                <td class="footer-td">
                        Copyright 2017 Adobe System Incorported. All rights reserved.
                </td>
            </tr>
        </table>
        <!-- Email Footer : END -->

    </center>
</body>
</html>

Note:

In this example, the image is hard-coded into the HTML. You can set it to read the image that an AEM author dropped into the dialog as opposed to keeping the image static. 

Note:

Notice a Script tag contains a method named setIframeHeight. This method is responsible to ensure all of the HTL component is visible in the Touch UI during edit mode. Otherwise, not all of the HTL component is visible. 

Next notice these lines of HTL code at line 346:

<p>
<div data-sly-test="${!ibeanObj.lBean}">There are no previous additions</div>
<div data-sly-test="${ibeanObj.lBean}" data-sly-list.items="${ibeanObj.lBean}">
<p><a href="${items.path}">${items.page}</a></p>
<p>${items.desc}</p>
<hr>
</div>
</p>
</div>

Here, ibeanObj is an instance of IssuesMultiBean class developed earlier in this article. The code

<p><a href="${items.path}">${items.page}</a></p>
<p>${items.desc}</p>
</div>

is how you handle a collection. In this example,

<div data-sly-test="${ibeanObj.lBean}" data-sly-list.items="${ibeanObj.lBean}">

maps to the data member named lBean defined in the IssuesMultiBean class.

${itemsList.page} maps to the page data member in the ItemsBean class. Likewise, path maps to the data member in the ItemsBean class.

Create a page based on the news template

The final task that you perform in order to see a web page that renders the newsletter and based on the news template (the template created earlier in this development article).

newsHeader
The HTL component created in this article

To create a web page that renders the newsletter, perform these tasks:

  1. To view the Websites page, enter the URL http://localhost:4502/siteadmin#/content.
  2. Select New, New Page.
  3. Specify the title of the page in the Title field.
  4. Specify the name of the page in the Name field.
  5. Select news from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information when creating the template, the template will not show up in the New Page dialog box.
  6. Open the new page that you created by double-clicking it in the right pane. 
  7. Drag the tab-component into the page. 
  8. Fill in the values in the Touch UI dialog. You should see a page displaying data similar to the previous illustration.

See also

Congratulations, you have just created an AEM sample application that uses a HTL component that renders a newsletter Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy