Article summary

Summary

Discusses how to develop an AEM HTML Template Language (HTL - formerly known as Sightly) component that uses the WCMUsePojo class, a Maven 10 Archetype project, and a Multifield control. Also discusses how to use the Experience Manager Urber 6.2 JAR.  

A special thank you to Lokesh BS, community member of the year for 2015, 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.

NOTE: This article was updated Jan 2018 to include a RTE (with all the RTE plug-ins) and TagPicker in each multifield .

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/iKVGlo3iM-o

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 uses the WCMUsePojo API. 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/mfHTL62/en.html (assuming you deploy on author).

Download

Note:

To ensure that the Multifield works in the component dialog, also install the ACS-Commons for AEM located here: https://adobe-consulting-services.github.io/acs-aem-commons/.

If you do not install the ACS-Commons package, then this example will not work. 

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 (AEM) 6 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Langauge (HTL - formally known as Sightly) to develop the AEM component. For example, consider an author whom enters information into a multi-field control in the component's dialog, as shown in this illustration.

dialoga
A HTL Component Dialog that uses a Multi-field that contains a RTE

In the previous illustration, notice that the multi-field has the following fields:

1. granite/ui/components/foundation/form/textfield (Page Name)

2. granite/ui/components/foundation/form/pathbrowser (Path)

3. cq/gui/components/common/tagspicker (Tags)

4. cq/gui/components/authoring/dialog/richtext (the Rich Text Editor)

When an author clicks the Add Field button, a new area that contains these same fields appear. This lets an author dynamically enter as many sections with the same fields as required. 

The component created in this article is a HTL component that uses Java to retrieve the values entered into the multi-field control. The Java class that you use as part of the HTL component extends com.adobe.cq.sightly.WCMUsePojo.

The HTL component displays the values entered into the dialog, as shown in this illustration.

clienta
Values entered by a multi-field are displayed in an AEM page, including links from a RTE

This development article steps you through how to build an AEM 6.2 HTL component by using an AEM Maven Archetype 10 project. 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.

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

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 - mfHTL62
  • artifactId - mfHTL62
  • version - 1.0-SNAPSHOT
  • package - com.aem.community.mf
  • appsFolderName - mfHTL62
  • artifactName - mfHTL62
  • componentGroupName - mfHTL62
  • contentFolderName - mfHTL62
  • cssId - mfHTL62
  • packageGroup - mfHTL62
  • siteName - mfHTL62

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 mfHTL62 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 mfHTL62.core. You do not have to work in the other projects under mfHTL62. 

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 Java files to the com.aem.community.mf.core package:

  • TouchMultiComponent - this class is the Java side of the HTL component and extends com.adobe.cq.sightly.WCMUsePojo, which is an abstract class that implements the Use interface. For information, see WCMUsePojo.
  • TouchMultiBean - stores values used in the multifield 

 

TouchMultiBean class

The TouchMultiBean class is used to store values in each multi-field. The following Java code represents the TouchMultiBean class.

package com.aem.community.mf.core;

public class TouchMultiBean {
	 
	//Stores the title from the diaolog
	private String title;
	
	//Stores the apth from the dialog
	private String path;
	
	//Stores the Flag from the dialog
	private String flag;

	//Stores the RTE from the dialog
	private String text;  

	public String getText() {
		   
	    return text;

	}

	public void setText(String text) {

	    this.text = text;

	}

	 
	public String getFlag() {
	return flag;
	}
	public void setFlag(String flag) {
	this.flag = flag;
	}
	public String getTitle() {
	return title;
	}
	public void setTitle(String title) {
	this.title = title;
	}
	public String getPath() {
	return path;
	}
	public void setPath(String path) {
	this.path = path;
	}
	 
	}

TouchMultiComponent class

The TouchMultiComponent 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. 

Multifield data is retrived using this line of code.

String[] itemsProps = getProperties().get("myUserSubmenu", String[].class);

The value myUserSubmenu corresponds to the name of the dialog node that is the multifield. (Shown later in this article). 

The values that are entered into the multi-field are retrieved as JSON and placed into a TouchMultiBean object. 

jObj = new JSONObject(itemsProps[i]);
TouchMultiBean menuItem = new TouchMultiBean();

String title = jObj.getString("title");
String path = jObj.getString("path");
String flag = jObj.getString("flag");
String text = jObj.getString("text");

menuItem.setTitle(title);
menuItem.setPath(path);
menuItem.setFlag(flag);
menuItem.setText(text);
submenuItems.add(menuItem);

The following method represents the TouchMultiComponent class.

package com.aem.community.mf.core;

import java.util.ArrayList;
import java.util.List;
 
import org.apache.sling.commons.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
 
import com.adobe.cq.sightly.WCMUsePojo;
 
public class TouchMultiComponent extends WCMUsePojo {
 
private static final Logger LOGGER = LoggerFactory.getLogger(TouchMultiComponent.class);
private List<TouchMultiBean> submenuItems = new ArrayList<TouchMultiBean>();
 
@Override
public void activate() throws Exception {
setMultiFieldItems();
}
 
/**
* Method to get Multi field data
* @return submenuItems
*/
private List<TouchMultiBean> setMultiFieldItems() {
 
@SuppressWarnings("deprecation")
JSONObject jObj;
try{
String[] itemsProps = getProperties().get("myUserSubmenu", String[].class);

if (itemsProps == null) {
	
	LOGGER.info("PROPS IS NULL") ; 
}


if (itemsProps != null) {
for (int i = 0; i < itemsProps.length; i++) {
 
jObj = new JSONObject(itemsProps[i]);
TouchMultiBean menuItem = new TouchMultiBean();
 
String title = jObj.getString("title");
String path = jObj.getString("path");
String flag = jObj.getString("flag");
String text = jObj.getString("text");
 
menuItem.setTitle(title);
menuItem.setPath(path);
menuItem.setFlag(flag);
menuItem.setText(text);
submenuItems.add(menuItem);

LOGGER.info("TEXT IS "+text) ;
}
}
}catch(Exception e){
LOGGER.error("Exception while Multifield data {}", e.getMessage(), e);
}
return submenuItems;
}
 
public List<TouchMultiBean> getMultiFieldItems() {
return submenuItems;
}
}

You may be wondering why JSON data is referenced in this Java example. The reason is because the multifield data is stored as JSON. Look at this JCR node: 

/content/mfHTL62/en/jcr:content/par/touchmulti

Then look at the myUserSubmenu property. Notice that the data is stored as JSON. These are the values that are parsed in the Java class. 

 

jsona
Multifield data is stored as JSON

In the previous illustration, you can see the RTE data is stored as HTML tags as the text value. When this RTE data is written out to an HTL component, it appears as rendered HTML (see the illustration shown at the start of this article). 

Modify the Maven POM file

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

<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\mfHTL62\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>mfHTL62</groupId>
        <artifactId>mfHTL62</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>mfHTL62.core</artifactId>
    <packaging>bundle</packaging>
    <name>mfHTL62 - Core</name>
    <description>Core bundle for mfHTL62</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.aem.community.mf.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/mfHTL62/install to exist!!          -->
                            <!--    This is typically the case when ui.apps is deployed first                -->
                            <!--    Otherwise, create /apps/mfHTL62/install manually (CRXDE|Lite)  -->
                            <slingUrlSuffix>/apps/mfHTL62/install/</slingUrlSuffix>
                            <failOnError>true</failOnError>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
    <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.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\mfHTL62.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\mfHTL62\core\target. The file name of the OSGi component is mfHTL62.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/mfHTL62/components/content 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 touchmulti.
  • Title: The title that is assigned to the component. Enter touchmulti.
  • Description: The description that is assigned to the template. Enter touchmulti.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter mfHTL62. (The component is located under the mfHTL62 heading in the Touch UI side rail.)

3. Click Ok.

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

component
The touchmulti component

Note:

Rename touchmulti.jsp to touchmulti.html. 

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 in a multi-field control. 

dialoga
Dialog for the HTL component

The following illustration shows the JCR nodes for this component.

dialogjcr
JCR Nodes that create the dialog

Build the dialog by performing these tasks:

1. Select /apps/mfHTL62/components/content/touchmulti.

2. Right click and select Create, Create Node.

3. Enter the following values:

  • Name: cq:dialog
  • Type: nt:unstructured

4. Add the following properties to the cq:dialog node.

  • sling:resourceType (String) - cq/gui/components/authoring/dialog

5. Select /apps/mfHTL/components/content/touchmulti/cq:dialog.

6. Right click and select Create, Create Node. Enter the following values:

  • Name: content
  • Type: nt:unstructured

7. Add the following properties to the content node.

  • sling:resourceType (String) - granite/ui/components/foundation/container

8. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content.
9. Right click and select Create, Create Node. Enter the following values:

  • Name: layout
  • Type: nt:unstructured

10. Add the following properties to the layout node.

  • sling:resourceType (String) - granite/ui/components/foundation/layouts/tabs
  • type (String) - nav

11. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content.
12. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: nt:unstructured

13. Click on the following node:/apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items.

14. Right click and select Create, Create Node.

15. Enter the following values:

  • Name: india
  • Type: nt:unstructured

16. Add the following property to the india node.

  • sling:resourceType (String) - granite/ui/components/foundation/section
  • jcr:title (String) - India

17. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items.

18. Right click and select Create, Create Node.

19. Enter the following values:

  • Name: usa
  • Type: nt:unstructured

20. Add the following property to the usa node.

  • sling:resourceType (String) - granite/ui/components/foundation/section
    jcr:title (String) - usa 

21. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items.

22. Right click and select Create, Create Node.

23. Enter the following values:

  • Name: uk
  • Type: nt:unstructured

24. Add the following property to the uk node.

  • sling:resourceType (String) - granite/ui/components/foundation/section
  • jcr:title (String) - uk

25. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india.

26. Right click and select Create, Create Node.

27. Enter the following values:

  • Name: layout
  • Type: nt:unstructured

28. Add the following property to the layout node.

  • sling:resourceType (String) - granite/ui/components/foundation/layouts/fixedcolumns

29. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india.

30. Right click and select Create, Create Node.

31. Enter the following values:

  • Name: items
  • Type: nt:unstructured

32. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india/items.

33. Right click and select Create, Create Node.

34. Enter the following values:

  • Name: column
  • Type: nt:unstructured

35. Add the following property to the column node.

  • sling:resourceType (String) - granite/ui/components/foundation/container

36. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india/items/column.

37. Right click and select Create, Create Node.

38. Enter the following values:

  • Name: items
  • Type: nt:unstructured

39. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india/items/column/items.

40. Right click and select Create, Create Node.

41. Enter the following values:

  • Name: fieldset
  • Type: nt:unstructured

42. Add the following property to the fieldset node.

  • sling:resourceType (String) - granite/ui/components/foundation/form/fieldset
  • jcr:title (String) - India Dashboard

43. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india/items/column/items/fieldset.

44. Right click and select Create, Create Node.

45. Enter the following values:

  • Name: layout
  • Type: nt:unstructured

46. Add the following property to the layout node.

  • sling:resourceType (String) - granite/ui/components/foundation/layouts/fixedcolumns

47. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india
/items/column/items/fieldset.

48. Right click and select Create, Create Node.

49. Enter the following values:

  • Name: items
  • Type: nt:unstructured

50. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india
/items/column/items/fieldset/items.

51. Right click and select Create, Create Node.

52. Enter the following values:

  • Name: column
  • Type: nt:unstructured

53. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india
/items/column/items/fieldset/items/columns.

54. Right click and select Create, Create Node.

55. Enter the following values:

  • Name: items
  • Type: nt:unstructured

56. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india
/items/column/items/fieldset/items/columns/items.

57. Right click and select Create, Create Node.

58. Enter the following values:

  • Name: dashboard
  • Type: nt:unstructured

59. Add the following properties to the dashboard node.

  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield
  • name (String) - ./iDashboard
  • fieldLabel (String) - Dashboard
  • fieldDescription (String) - Enter Dashboard name

60. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india
/items/column/items/fieldset/items/columns/items.

61. Right click and select Create, Create Node.

62. Enter the following values:

  • Name: pages
  • Type: nt:unstructured

63. Add the following properties to the pages node.

  • sling:resourceType (String) - granite/ui/components/foundation/form/multifield
  • class (String) - full-width
  • fieldLabel (String) -URLs
  • fieldDescription (String) - Click '+' to add a new page

64. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india
/items/column/items/fieldset/items/columns/items/pages.

65. Right click and select Create, Create Node.

66. Enter the following values:

  • Name: field
  • Type: nt:unstructured

67. Add the following properties to the field node.

  • sling:resourceType (String) -granite/ui/components/foundation/form/fieldset
  • name (String) - ./myUserSubmenu
  • acs-commons-nested (String) - ""

68. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india
/items/column/items/fieldset/items/columns/items/pages/field.

69. Right click and select Create, Create Node.

70. Enter the following values:

  • Name: layout
  • Type: nt:unstructured

71. Add the following properties to the field node.

  • sling:resourceType (String) - granite/ui/components/foundation/layouts/fixedcolumns
  • method (String) - absolute

72. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india
/items/column/items/fieldset/items/columns/items/pages/field.

73. Right click and select Create, Create Node.

74. Enter the following values:

  • Name: items
  • Type: nt:unstructured

75. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india
/items/column/items/fieldset/items/columns/items/pages/field/items.

76. Right click and select Create, Create Node.

77. Enter the following values:

  • Name: column
  • Type: nt:unstructured

78. Add the following property to the column node.

  • sling:resourceType (String) - granite/ui/components/foundation/container

79. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india/items
/column/items/fieldset/items/columns/items/pages/field/items/column.

80. Right click and select Create, Create Node.

81. Enter the following values:

  • Name: items
  • Type: nt:unstructured

82. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items
/india/items/column/items/fieldset/items/columns/items/pages/field/items/column/items.

83. Right click and select Create, Create Node.

84. Enter the following values:

  • Name: page
  • Type: nt:unstructured

85. Add the following properties to the page node: 

  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield
  • name (String) - ./title
  • fieldLabel (String) - Page Name
  • fieldDescription (String) - Enter Page name

86. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india/items
/column/items/fieldset/items/columns/items/pages/field/items/column/items.

87. Right click and select Create, Create Node.

88. Enter the following values:

  • Name: path
  • Type: nt:unstructured

89. Add the following properties to the path node:

  • sling:resourceType (String) - granite/ui/components/foundation/form/pathbrowser
  • name (String) - ./path
  • fieldLabel (String) - Path Name
  • fieldDescription (String) - Enter Path name
  • rootPath (String) - /content

90. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india/items
/column/items/fieldset/items/columns/items/pages/field/items/column/items.

91. Right click and select Create, Create Node.

92. Enter the following values:

  • Name: flag
    Type: nt:unstructured

93. Add the following properties to the flag node:

  • sling:resourceType (String) - cq/gui/components/common/tagspicker
  • name (String) - ./flag
  • fieldLabel (String) - FLAG Name
  • fieldDescription (String) - Enter Flag Description

94. Click on the following node: /apps/mfHTL62/components/content/touchmulti/cq:dialog/content/items/india/items
/column/items/fieldset/items/columns/items/pages/field/items/column/items.

95. Right click and select Create, Create Node.

96. Enter the following values:

  • Name: text
  • Type: nt:unstructured

97. Add the following properties to the text node:

  • sling:resourceType (String) - cq/gui/components/authoring/dialog/richtext
  • name (String) - ./text
  • useFixedInlineToolbar(String) - true


 

 

Dashboard
Enter Dashboard name
URLs
./iItems
./iItems

Note:

To use acs commons multifield, it is mandatory to add acs-commons-nested=”” property to a fieldset within a multifield node like at myUserSubmenu node in our example.

The value acs-commons-nested=”JSON_STORE” means we want to store multifiled data as JSON Array. To store multi filed data as seperate child node use acs-commons-nested=”NODE_STORE”.

Read more at AEMCQ5Tutorials: Create TouchUI Multifield Component using HTL http://www.aemcq5tutorials.com/tutorials/touchui-multifield-component-using-htl/.

Note:

It is strongly recommended that you install the package at the start of this article instread of building the JCR nodes by using CRXDE lite.  

Add HTL code

Add code to the HTML file named touchmulti.html located in the following JCR location:

/apps/mfHTL62/components/content/touchmulti/touchmulti.html

In the HTL file, notice this line of code:

<div data-sly-use.multiItems="com.aem.community.mf.core.TouchMultiComponent">

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

Add the following HTML to this file.

Click here to configure Multi Field User Menu
<div data-sly-use.multiItems="com.aem.community.mf.core.TouchMultiComponent">
<div data-sly-list.head="${multiItems.multiFieldItems}">
<p><b>Value from the Text Field:</b> ${head.title}</p>
<p><b>Value from the Path Finder:</b> ${head.path}</p>
<p><b>Selected Tags:</b> ${head.flag}</p>
<h3>RTE Data</h3>
${head.text @ context='html'}
</div>
</div>

Next notice these lines of HTL code:

<div data-sly-list.head="${multiItems.multiFieldItems}">
<p><b>Page Name:</b> ${head.title}</p>
<p><b>Page Path:</b> ${head.path}</p>
<p><b>Flag:</b> ${head.flag}</p>
${head.text @ context='html'}
</div>
</div>

Here, head is how you handle a collection. In this example,

<div data-sly-list.head="${multiItems.multiFieldItems}">

maps to the return valus of the getMultiFieldItems() method, which returns a List object where each element is a TouchMultiBean object

${itemsList.title} maps to the title data member in the TouchMultiBean  object.

Note:

Because the RTE data contains HTML tags that were entered from the RTE (for example, <p>This is <a href=\"http://abcnews.go.com/\" target=\"_blank\">ABC News</a></p>), to render the value as HTML, the following HTL syntax is used: ${head.text @ context='html'}

View the output of the HTL component

To access the component, enter the following URL: 

http://localhost:4502/editor.html/content/mfHTL62/en.html

The following illustration shows the HTL component. Notice that the Links created in the RTE are written out. 

 

clienta
The HTL component created in this article

Note:

You need to drag and drop the touchmulti component into the page. Or you can install the package at the start of this article. 

See also

Congratulations, you have just created an AEM sample application that uses a HTL component that uses the WCMUsePojo API. 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