Article summary

Summary

Discusses how to create a custom HTL image/text component. An AEM author can set the position of the image by using a component dialog and drag drop other components into the image text component.

A special thank you to Prince Shivhare for contributing code used in this community article. 

Also, thank you to Ratna Kumar Kotla for testing this article to ensure it works. 

Digital Marketing Solution(s) Adobe Experience Manager 6.3/6.4
Audience Developer
Required Skills HTML
Version 6.3/6.4

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 lets an author set the position of the image. 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/sightlymf.html (assuming you deploy on author).

Download

Note:

The HTL component does not use a Java WCMUsePojo or Sling Model. 

Introduction

As an Adobe Experience Manager component developer, you can create custom components to address project requirements. For example, you can create a custom image/text component that can let an author dynamically set the position of the image on a web page. The component developed in this article uses HTL. For information, see HTML Template Language.

An author can set the image on the left side of the page, as shown here.

Left
The image appears on the left side of the web page

Likewise, the author can set the image on the right side.

Right
The image appears on the right side of the page

This development article walks you through how to develop this HTL custom component.  

Create an AEM application folder structure

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

struc
Click on Experience Fragments

The following describes each application folder:

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

To create an application folder structure:

  1. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
  2. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  3. Enter the folder name into the Create Folder dialog box. Enter sightlymf.
  4. Repeat steps 1-4 for each folder specified in the previous illustration.
  5. Click the Save All button.

Note:

Repeat this procedure and name it my-second-xf. Specify a different image and text value. Both Experience Fragments are used later in this article. 

Create an Experience Manager Template

You can create a static template by using CRXDE Lite (as opposed to an editable template). An Experience Manager template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp#.

2. Right-click the template folder (within your application), select Create, Create Template.

3. Enter the following information into the Create Template dialog box:

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

4. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

5. Click Next for Allowed Parents.

6. Select OK on Allowed Children.

Create the page component based on the template

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

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

1. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp#.

2. Right-click /apps/website2/components/page, then select Create, Create Component.

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

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

4. Select Next for Advanced Component Settings and Allowed Parents.

5. Select OK on Allowed Children.

6. Open the templateWeb.jsp located at: /apps/sightlymf/components/page/templateSightlyMF/templateSightlyMF.jsp.

7. Enter the following HTML code.

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is where your Touch UI component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Create Experience Manager Components

Create these HTL Experience Manager components:

  • A - the headingComponent that renders a heading value 
  • B - the ButtonComponent that renders a Button
  • C - the imageComponent that displays an image that is rendered either on the left or right, depending on the value that an author sets in the dialog. 

The following illustration shows these components. 

 

ComponentA
The Image/Text Component

Note:

If you install the package available at the start of this article, you can view these components located here: /apps/sightlymf/components/page. This article describes how to create the main TextImage component. 

Create the text image component

To create the image text component, perform these tasks using CRXDE Lite:

1. Right click on After you setup the AEM folder structure, create the AEM Touch UI component. Perform these tasks using CRXDE Lite:

1. Right click on /apps/sightlymf/components/page 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 textimagecomponent
  • Title: The title that is assigned to the component. Enter textimagecomponent.
  • Description: The description that is assigned to the component.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter sightlymf. 

3. Click Ok.

Change the file extention of  /apps/sightlymf/components/page/textimagecomponent/textimagecomponent.jsp to .HTML. Next, add the following code to textimagecomponent.html.

<style>
.main-div1{
	max-width: 100%;
    height:400px;
	border-style: dashed;

}
.imagecomponent1{
	width: 40%;
    height:70%;
    margin: 3.5%;

    display: inline-block;

}
.parsys11{
	width:30%;
	display: inline-block;
    position: absolute;
    margin: 5%;
    margin-left:14%;

}
.parsys12{
	width:30%;
	display: inline-block;
    margin: 4%;
    margin-left:6%;
}

.imagecomponent2{
	max-width: 100%;
    height:50%;
    margin: 4.5%;
    display: inline-block;
	position: absolute;
}

</style>
	<!--/* Select an Image position*/-->
	<div class="main-div1" >

        <!--/* Image position on left*/-->
	 <div data-sly-test="${properties.position=='left'}">
    	<div class="imagecomponent1" data-sly-resource="${'content' @ resourceType='sightlymf/components/page/imageComponent'}">
		</div>
		<div class="parsys11" data-sly-resource="${'par1' @ resourceType='wcm/foundation/components/parsys'}"></div>
	</div>


    	<!--/*Image position on right*/-->
	 <div data-sly-test="${properties.position=='right'}">
         <div class="parsys12" data-sly-resource="${'par1' @ resourceType='wcm/foundation/components/parsys'}"></div>

        <div class="imagecomponent2" data-sly-resource="${'content' @ resourceType='sightlymf/components/page/imageComponent'}">
		</div>

         </div>
</div>

In the previous code example, notice the use of this line of code: 

<div data-sly-test="${properties.position=='left'}">

This line of HTL code is checking whether the author selected right or left from the component's dialog.

Dialog
The dialog that lets an author set the image on the left or right side of the component

The Position field in this dialog is granite/ui/components/foundation/form/select. Each option is an nt:unstructured node. The value of the two nodes is right and left. You can view these two node here:

/apps/sightlymf/components/page/textimagecomponent/cq:dialog/content/items/column/items/fieldset/items/column/items/ImageAlign/items 

If right is selected from the dialog, then the following code is used. 

<div align="right" class="connected-Title">
  					 <H2>${properties.heading}</H2>
                     	<p align="right" class="title_Style"> ${properties.description}</p>
     						<div class="connected-Img">
        						<div class="row" >
                                    <img src='${properties.fileReference}' height="42" width="42" align="left"> </img>

				</div>
					</div>

Likewise, if Left is selected, then the following code is invoked. 

 

                     <div data-sly-test="${properties.position=='right'}">
				<div align="left" class="connected-Title">
  					 <H2>${properties.heading}</H2>
                     	<p align="left" class="title_Style"> ${properties.description}</p>
     						<div class="connected-Img">
        						<div class="row" >
                                    <img src='${properties.fileReference}' height="42" width="42" align="right"> </img>
				</div>
                	</div>

Note:

Look at the code in the other components to understand how they work. For example, to understand what the Button component, does, look at the code here: /apps/sightlymf/components/page/ButtonComponent/ButtonComponent.html.

Use the Text Image Component within an Experience Manager page

From the Side Rail, drag and drop the TextImage Component onto the AEM web page here:

http://localhost:4502/editor.html/content/sightlymf.html 

Once done, you will see the page, as shown in the following illustraton. 

Page
The TextImage component

Hover your mouse over the left part of the component. You will see the Image component, as shown here. 

Page1
The Image component appears in the TextImage component

Click the wrench icon and you will a dialog appear that lets you select an image (granite/ui/components/foundation/form/fileupload).

Page2
Drag an image onto the Image component dialog

Next drag and drop the button component. You can use its dialog to set the label that is displayed on the button. (This show you how you can break down individual widgets like buttons as an AEM component). 

Page3
Dragging a Button component onto an AEM Web Page

Finally drag and drop the heading component into the AEM Page, as shown in this illustration. 

Page4
Drag the Heading Component

You can set the Heading size and the Text value by using the dialog, as shown here. 

Dialog1
The Heading component dialog

Once done, the Experience Manager page resembles this illustration. 

FinishedPage
An AEM Page displaying the custom Text Image component.

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