Article summary

Summary

Discusses how to develop an AEM HTML Template Language (HTL - formerly known as Sightly) component that uses the WCMUsePojo class and uses a Granite/Coral Multifield (granite/ui/components/coral/foundation/form/multifield) in the component dialog. This article also shows you application logic to use when using Sling Models as opposed to WCMUsePojo

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.

A special thank you to Ratna Kumar Kotla, a top AEM community members, for testing this article to ensure it works. Also, thank you to Veena Vikraman for contributing the Sling Model application logic. 

This HELPX article is based on community content that community members have implemented in various projects. If you see content that needs to be corrected or other updates , please email Scott Macdonald and Kautuk Sahni at scottm@adobe.com and ksahni@adobe.com.

Digital Marketing Solution(s) Adobe Experience Manager 6.3
Audience Developer
Required Skills Java, HTML, JavaScript
Version 6.3

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 makes use of a Coral/Granite 6.3 multi-field. 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/mfCoral63/en.html (assuming you deploy on author).

Download

Introduction

You can create an Adobe Experience Manager (AEM) 6.3 Touch UI component that uses a Coral/Granite 6.3 multi-field. That is, you can use a Granite 6.3 multi-field data type to build a dialog that lets an author enter information into a multi-field control in the component's dialog, as shown in this illustration.

dialog
A HTL Component Dialog that uses a Granite/Coral Multi-field

The multi-field in this article has the following fields based on Granite/Coral data types:

 

Note:

An older Granite multi-field is based on granite/ui/components/foundation/form/multifield. To learn how to work with this Granite multi-field, see Creating an AEM HTML Template Language 6.3 component that uses a Multifield.

A Coral/Granite multi-field is based on granite/ui/components/coral/foundation/form/multifield. There are several advantages to working with Coral/Granite multi-field. For one thing, you do not need to write a JS script or use the ACS-Commons package as is typically required when using a Granite multi-field.

However, there are also some differences too. One important difference to understand is how the data is stored in the JCR. By default, Coral/Granite multi-field data is stored as child nodes, as shown in the illustration. Notice that each multi-field is a separate node, as shown here.

nodes
Child nodes where data is stored

The data that an author entered into the dialog is stored as node properties. The name of the property corresponds to the name of the field in the dialog. 

data
Node properties where data is stored

Because data is stored a child nodes, this changes the way you read the multi-field data when using Java business logic (for a Granite multi-field, data can be stored as JSON). For example, item0 represents the first multi-field and item1 represents the second multi-field. The properties of these nodes represents the values that the author entered into the dialog.

You can develop Java business logic in a WCMUsePojo class to read the dialog values and then display the data in the HTL component. This is covered in this development article. 

Note:

In addition to using the WCMUsePojo Java class, this article also shows you how to retrieve multi-field values by using Sling Models. 

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

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

M10
Files generated by Maven 10 Archetype

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

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

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.htl.community.coral.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. 
  • TouchMultiBean - stores values used in the multifield, including a data member for each field in the multifield.

TouchMultiBean class

The TouchMultiBean class is used to store values in each multi-field. It stores a value for each field in the Multifield dialog. The following Java code represents the TouchMultiBean class.

package com.htl.community.coral.core;

public class TouchMultiBean {

	
//A Data Mamber for Each field in the Coral Multi-field	
private String product;
private String path;
private String date;
private String show;
private String size;


public String getSize() {
return size;
}


public void setSize(String size) {
this.size = size;
}

  
public String getDate() {
return date;
}


public void setDate(String date) {
this.date = date;
}




public String getProduct() {
return product;
}
public void setProduct(String product) {
this.product = product;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}


public String getShow() {
return show;
}


public void setShow(String show) {
this.show = show;
}
  
}

TouchMultiComponent class

The TouchMultiComponent class is the Java part of the AEM HTL component. This class extends the WCMUsePojo class. You override the activate method in this class.

The first task that this class does is retrieve the current node. The nodes that contain the multi-field classes are grandchildren to the current node. There can be a 1 to many relationship as well. That is, an author may have only filled in one multi-field or many. As a result, you have to create JCR application logic to drill down into the grandchildren nodes and read the values.

 

nodes2
JCR Nodes where data is stored

In the previous illustration, notice the node named sample_collapsible_m. This is the node retrieved by using thie code: 

Node currentNode = getResource().adaptTo(Node.class);

Now you must get the grandchildren of this node by using this logic:  

NodeIterator ni = currentNode.getNodes() ;

//get the grandchild node of the currentNode -
while (ni.hasNext()) {

    Node child = (Node)ni.nextNode();
    NodeIterator ni2 = child.getNodes() ;
    setMultiFieldItems(ni2);
}

The NodeIterator object is passed to the setMultiFieldItems method to retieve the values and place them in a Java collection. 

 

private List<TouchMultiBean> setMultiFieldItems(NodeIterator ni2) {
  
try{
   
	String product;
	String path;
	String startDate;
	String show;
	String size;

	//THIS WILL READ THE VALUE OF THE CORAL3 Multifield and set them in a collection 
	while (ni2.hasNext()) {
		
		TouchMultiBean menuItem = new TouchMultiBean();
		
		
		Node grandChild = (Node)ni2.nextNode();
		
		log.info("*** GRAND CHILD NODE PATH IS "+grandChild.getPath());
		
		product= grandChild.getProperty("product").getString(); 
		path = grandChild.getProperty("path").getString(); 
		show = grandChild.getProperty("show").getString(); 
		
		menuItem.setProduct(product);
		menuItem.setPath(path);
		menuItem.setShow(show);
		submenuItems.add(menuItem);
	}
}

Notice that each value is added to the TouchMultiBean object by invoking its corresponding method. For example, to set the flag value, this method is invoked. 

menuItem.setProduct(product);

The following code represents the TouchMultiComponent class. 

package com.htl.community.coral.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;

import javax.jcr.Node;
import javax.jcr.Session;
import javax.jcr.NodeIterator; 
  
public class TouchMultiComponent extends WCMUsePojo {
  
	protected final Logger log = LoggerFactory.getLogger(this.getClass());


private List<TouchMultiBean> submenuItems = new ArrayList<TouchMultiBean>();
  
@Override
public void activate() throws Exception {

	Node currentNode = getResource().adaptTo(Node.class);
	NodeIterator ni =  currentNode.getNodes() ; 
	
	//get the grandchild node of the currentNode - which represents where the MultiField values are stored
	while (ni.hasNext()) {
		
		Node child = (Node)ni.nextNode(); 
		
		NodeIterator ni2 =  child.getNodes() ; 
		setMultiFieldItems(ni2); 
	}
}
  
/**
* Method to get Multi field data
* @return submenuItems
*/
private List<TouchMultiBean> setMultiFieldItems(NodeIterator ni2) {
  
try{
   
	String product;
	String path;
	String startDate;
	String show;
	String size;; 

	//THIS WILL READ THE VALUE OF THE CORAL3 Multifield and set them in a collection 
	while (ni2.hasNext()) {
		
		TouchMultiBean menuItem = new TouchMultiBean();
		
		
		Node grandChild = (Node)ni2.nextNode();
		
		log.info("*** GRAND CHILD NODE PATH IS "+grandChild.getPath());
		
		product= grandChild.getProperty("product").getString(); 
		path = grandChild.getProperty("path").getString(); 
		show = grandChild.getProperty("show").getString(); 
		startDate = grandChild.getProperty("startDate").getString();
		size = grandChild.getProperty("size").getString();
		log.info("*** VALUE OF DATE IS "+startDate);
		
		menuItem.setProduct(product);
		menuItem.setPath(path);
		menuItem.setShow(show);
		menuItem.setDate(startDate); 
		menuItem.setSize(size); 
		submenuItems.add(menuItem);
	}
}
  
catch(Exception e){
	log.error("Exception while Multifield data {}", e.getMessage(), e);
}
return submenuItems;
}
  
public List<TouchMultiBean> getMultiFieldItems() {
return submenuItems;
}
}

Modify the Maven POM file

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

<dependency>
               <groupId>com.adobe.aem</groupId>
               <artifactId>uber-jar</artifactId>
               <version>6.3.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.

MPP
Parent POM

Add the dependency shown above to the Parent POM file. Next, modify the POM file located at C:\AdobeCQ\mfCoral63\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>mfCoral63</groupId>
        <artifactId>mfCoral63</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>mfCoral63.core</artifactId>
    <packaging>bundle</packaging>
    <name>mfCoral63 - Core</name>
    <description>Core bundle for mfCoral63</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.htl.community.coral.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/mfCoral63/install to exist!!          -->
                            <!--    This is typically the case when ui.apps is deployed first                -->
                            <!--    Otherwise, create /apps/mfCoral63/install manually (CRXDE|Lite)  -->
                            <slingUrlSuffix>/apps/mfCoral63/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>com.adobe.granite.bundles</groupId>
    <artifactId>json</artifactId>
    <version>20090211_1</version>
    <scope>provided</scope>
</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\mfCoral63.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\mfCoral63\core\target. The file name of the OSGi component is mfCoral63.core-1.0-SNAPSHOT.jar.

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

Create the HTL Front End Component

Create the HTL component by performing these tasks using CRXDE Lite:

1. Right click on /apps/mfCoral63/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 mfCoral63.

3. Click Ok.

 

Note:

Change the extension of the component from JSP to HTML. 

Add HTL code

The new component is created here: 

/apps/mfCoral63/components/content/touchmulti

Change the extention to HTML and add the following code.

Click here to configure  Multi Field User Menu
<div data-sly-use.multiItems="com.htl.community.coral.core.TouchMultiComponent">
<div data-sly-list.head="${multiItems.multiFieldItems}">
<p><b>Name:</b> ${head.product}</p>
<p><b>Path:</b> ${head.path}</p>
<p><b>Date:</b> ${head.date}</p>
<p><b>Size:</b> ${head.size}</p>
<p><b>CHeckbox:</b> ${head.show}</p>
</div>
</div>

Here, multiItems is an instance of TouchMultiComponent class developed earlier in this article. Notice the use of the fully qualified path: 

<div data-sly-use.multiItems="com.htl.community.coral.core.TouchMultiComponent">

The code

<div data-sly-list.head="${multiItems.multiFieldItems}">
<p><b>Name:</b> ${head.product}</p>
<p><b>Path:</b> ${head.path}</p>
<p><b>Flag:</b> ${head.show}</p>
</div>

is how you handle a collection. In this example,

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

maps to the getMultiFieldItems method that returns a list of TouchMultiBean objects.   

${head.product} maps to the String product data member in the TouchMultiBean class.  

Create the component dialog

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 text values, which are then displayed in the AEM web page. (See the illustration shown at the beginning of this development article.)

A dialog that is built for the Touch UI is defined by using nodes of type un:structured. You define the type of control on the Touch UI dialog by setting the node's sling:resourceType property. For example, to define a text field on a Touch UI dialog, set the sling:resourceType property to granite/ui/components/coral/foundation/form/textfield.

When building a dialog for the Touch UI view, you define the type of control (for example, a text field) by setting the sling:resourceType property. In contrast, when building a dialog for the classic view, you define the type of control by setting its xtype property.

Create the Touch UI Dialog

The following XML shows the structure of the AEM component's dialog.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="63 Collapsible Multifield"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <products
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true"
                        eaem-show-on-collapse="EAEM.showProductName"
                        fieldLabel="Products">
                        <field
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            name="./products">
                            <items jcr:primaryType="nt:unstructured">
                                <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                    <items jcr:primaryType="nt:unstructured">
                                        <product
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldDescription="Name of Product"
                                            fieldLabel="Product Name"
                                            name="./product"/>
                                        <path
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                                            fieldDescription="Select Path"
                                            fieldLabel="Path"
                                            name="./path"
                                            rootPath="/content"/>
                                        <startDate
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                            class="field"
                                            displayedFormat="YYYY-MM-DD HH:mm"
                                            fieldLabel="Start Date"
                                            name="./startDate"
                                            type="datetime"/>
                                        <show
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                            name="./show"
                                            text="Show?"
                                            value="yes"/>
                                        <type
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                            fieldDescription="Select Size"
                                            fieldLabel="Size"
                                            name="./size">
                                            <items jcr:primaryType="nt:unstructured">
                                                <def
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Select Size"
                                                    value=""/>
                                                <small
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Small"
                                                    value="small"/>
                                                <medium
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Medium"
                                                    value="medium"/>
                                                <large
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Large"
                                                    value="large"/>
                                            </items>
                                        </type>
                                    </items>
                                </column>
                            </items>
                        </field>
                    </products>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

Note:

If you install the package at the start of this article, you do not have to manually create this dialog JCR node structure. If you are not familiar with how to create a component dialog by using CRXDE lite, please see Creating your first Adobe Experience Manager Touch UI component.

To create a dialog by using CRXDE lite, perform these tasks: 

1. Select /apps/mfCoral63/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 property to the cq:dialog node.

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

5. Select /apps/sightlymf/components/content/TabComponent/cq:dialog.

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

  • Name: content
  • Type: nt:unstructured

7. Add the following property to the content node.

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

8.  Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content.

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

  • Name: items
  • Type: nt:unstructured

10. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items.

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

  • Name: column
  • Type: nt:unstructured

12. Add the following property to the column node.

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

13. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column.

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

  • Name: items
  • Type: nt:unstructured

15. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items.

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

  • Name: products
  • Type: nt:unstructured

17. Add the following property to the products node (notice this is the multifield node).

  • sling:resourceType (String) - granite/ui/components/coral/foundation/form/multifield
  • composite (Boolean) - true
  • eaem-show-on-collapse (String) - EAEM.showProductName
  • fieldLabel (String) - Products

18. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products.

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

  • Name: field
  • Type: nt:unstructured

20. Add the following property to the field node.

  • sling:resourceType (String) - granite/ui/components/coral/foundation/container
  • name (String) - ./products

21. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field.

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

  • Name: items
  • Type: nt:unstructured

23. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items.

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

  • Name: column
  • Type: nt:unstructured

25. Add the following property to the field node.

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

26. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column.

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

  • Name: items
  • Type: nt:unstructured

28. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items.

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

  • Name: product
  • Type: nt:unstructured

30. Add the following property to the field node.

  • sling:resourceType (String) - granite/ui/components/coral/foundation/form/textfield
  • fieldDescription (String) - Name of Product
  • fieldLabel (String) - Product Name
  • name (String) - ./product (this value is referenced in the Java code)

31. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items.

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

  • Name: path
  • Type: nt:unstructured

33. Add the following property to the field node.

  • sling:resourceType (String) - granite/ui/components/coral/foundation/form/pathbrowser
  • fieldDescription (String) - Select Path
  • fieldLabel (String) - Path
  • name (String) - ./path (this value is referenced in the Java code)
  • rootPath (String) - /content

34. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items.

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

  • Name: startDate
  • Type: nt:unstructured

36. Add the following property to the field node.

  • sling:resourceType (String) - granite/ui/components/coral/foundation/form/datepicker
  • class (String) - field
  • displayFormat (String) - YYYY-MM-DD HH:mm
  • fieldLabel (String) - Start Date
  • name (String) - ./startDate (this value is referenced in the Java code)
  • type (String) - datetime
    rootPath (String) - /content

37. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items.

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

  • Name: show
  • Type: nt:unstructured

39. Add the following properties to the field node.

  • sling:resourceType (String) - granite/ui/components/coral/foundation/form/checkbox
  • name (String) - ./show (this value is referenced in the Java code)
  • text (String) - Show?
  • value  (String) - yes (the value of this checkbox when the author selects this value)

40. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items.

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

  • Name: select
  • Type: nt:unstructured

42. Add the following property to the field node.

  • sling:resourceType (String) - granite/ui/components/coral/foundation/form/select
  • fieldDescription (String) - Select Size
  • fieldLabel (String) - Size
  • name (String) - ./size (this value is referenced in the Java code)

43. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items/select.

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

  • Name: items
  • Type: nt:unstructured

45. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items/select/items.

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

  • Name: def
  • Type: nt:unstructured

47. Add the following property to the field node.

  • text (String) - Select Size
  • value (String) - def

48. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items/select/items.

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

  • Name: small
  • Type: nt:unstructured

50. Add the following property to the field node.

  • text (String) - Small
  • value (String) - small

51. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items/select/items.

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

  • Name: medium
  • Type: nt:unstructured

53. Add the following property to the field node.

  • text (String) - Medium
  • value (String) - medium

54. Select /apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items/select/items.

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

  • Name: large
  • Type: nt:unstructured

56. Add the following property to the field node.

  • text (String) - Large
  • value (String) - large



View the output of the HTL component

To access the component, enter the following URL:

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

Drag and drop the touchmulti from the side rail to the page. 

Client2
Drag the component from the side rail to the AEM web page

Click on the component to edit it within Edit mode. Enter the values into the Multifield, as shown here. 

dialog2
Values entered into a Multifield control

When you click the checkmark icon in the dialog, you will see the values in the web page. Also, the Multifield values are stored in the JCR, as shown in the illustations shown at the start of this article.

Using Sling Models to handle Multi-field values

This article used a Java class that extends WCMUsePojo to work with the multi-field fields. However, you can use a Sling Model instead. This section shows you how to create the Java Model class and the HTL code. Unlike the WCMUsePojo where you have to read node values by using the JCR API, when using Sling Models, all you have to do is inject a Resource that corresponds to the products node (the granite/ui/components/coral/foundation/form/multifield node in the dialog) .

The following class represents the Multifield class located in the com.htl.community.coral.core.models package. 

package com.htl.community.coral.core.models;


import javax.annotation.PostConstruct;
import javax.inject.Inject;
import javax.inject.Named;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Default;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Optional; 
import org.apache.sling.settings.SlingSettingsService;

@Model(adaptables = Resource.class)
public class Multifield {

	// Inject the products node under the current node
	@Inject
	@Optional
	public Resource products;

	// No need of a post construct as we don't have anything to modify after the
	// model is constructed
}

Note:

Simply add this Java class to the following package: com.htl.community.coral.core.models. As you can see, there is a lot less code than WCMUsePojo.  

Change the logic in the touchmulti.html file to the following HTL code. 

Click here to configure COOL Multi Field User Menu
<div
	data-sly-use.multiItems="com.htl.community.coral.core.models.Multifield">
	<div data-sly-list.head="${multiItems.products.listChildren}">
		<p>
			<b>Name:</b> ${head.product}
		</p>
		<p>
			<b>Path:</b> ${head.pathbr}
		</p>
		<p>
			<b>Date:</b> 
                  ${'yyyy-MM-dd HH:mm:ss.SSSXXX' @ format=head.startDate, timezone='UTC'}

		</p>
		<p>
			<b>Size:</b> ${head.size}
		</p>
		<p>
			<b>CHeckbox:</b> ${head.show}
		</p>
	</div>
</div>

Note:

As the startDate is a node based on a Date data type, notice the way the date value is displayed in HTL syntax. 

${'yyyy-MM-dd HH:mm:ss.SSSXXX' @ format=head.startDate, timezone='UTC'}

If you use Sling Models, then change the name of this node: 

/apps/mfCoral63/components/content/touchmulti/cq:dialog/content/items/column/items/products/field/items/column/items/path

to ./pathbr from ./path. When switching back to WCMUsePojo, then change the name back to ./path.  

 

See also

Join the AEM community at: Adobe Experience Manager Community

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