Article summary

Summary

Discusses how to add an Experience Manager dialog to the custom carousal component. 

A special thank you to community members Ranta Kumar Kotla for testing this Community Article to ensure it works.

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, JavaScript, HTML
Version Adobe Experience Manager 5.x 6.x
Video N/A

Introduction

This development article modifies the custom carousel component that you can create by following this article: Creating Custom Carousel components for Adobe Experience Manager.

In this development article, the custom carousel component is integrated with an Experience Manager dialog and added to the sidekick. An author can drag and drop the custom carousel component from the sidekick and then use a dialog to define the image description values during design time.

carouselDialog
The custom carousel component is dragged from the sidekick

To follow along with this development environment, create the custom carousel component by following the article that you can access from the link shown at the start of this article. The following illustration specifies the project files that you should have prior to following along with this article.

projectfiles
Project files that you should have prior to following this article

Create a new component under components named carousel 

The first step to integrate the custom carousel component with a dialog is to create a new component under the following code: /apps/carousel/components.

To create a component, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).
3. Right-click /apps/carousel/components, then select
Create, Create Component.
4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter carousel.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Resource Type: The component to inherit from. Specify .
  • Group: The name of the category under the sidekick where the component appears. Specify General.  

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

 

<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adobe Experience Manager Custom Carousel Demo</title>

<script type="text/javascript">
$(function(){
    $('#carousel').infiniteCarousel({
        displayTime: 6000,
        textholderHeight : .25
    });
});
</script>
<style type="text/css">
body {
    padding-top: 50px;
}
#carousel {
    margin: 0 auto;
    width: 400px;
    height: 390px;
    padding: 0;
    overflow: scroll;
    border: 2px solid #999;
}
#carousel ul {
    list-style: none;
    width: 1500px;
    margin: 0;
    padding: 0;
    position: relative;
}
#carousel li {
    display: inline;
    float: left;
}
.textholder {
    text-align: left;
    font-size: small;
    padding: 6px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
}
</style>
</head>

<body>

<div id="carousel">
    <ul>
        <li><img alt="" src="/content/dam/travel/1.jpg" width="500" height="213" /><p>Image 1.</p>
        </li>
        <li><img alt="" src="/content/dam/travel/2.jpg" width="500" height="213" /><p>Image 2</p>
        </li>
         <li><img alt="" src="/content/dam/travel/3.jpg" width="500" height="213" /><p>Image 3</p>
        </li>
        <li><img alt="" src="/content/dam/travel/4.jpg" width="500" height="213" /><p>Image 4</p>
        </li>
         <li><img alt="" src="/content/dam/travel/5.jpg" width="500" height="213" /><p>Image 5</p>
        </li>
    </ul>
</div>
<h3>This is an AEM example that uses five images retrieved from the AEM DAM and displayed within a custom Carousel component.</h3>

</body>
</html>

Add a dialog to the new component 

Add a dialog to the custom carousel component. When you are done, the dialog looks like the following illustration.   

Dialog

Once you have create the dialog, an AEM author can enter image descriptions into the dialog, as shown in the following illustration.  

Dialog2
An Experience Manager dialog that lets users enter text descriptions for each image in the custom carousel component

Perform these tasks to create a dialog for the carousel component:

1. Select /apps/carousel/components/carousel, right click and select New, Dialog.

2. Create an items node (nodeType cq:WidgetCollection) under the
your component's Dialog.

3. Create a node named panel (nodetype cq:Widget) under the items node. Assign this property to the panel node.  

Name Type   Value Description
xtype String panel Defines the type of widget as defined by the JSExt library.  

4. Create another node named items (nodeType cq:WidgetCollection) under the panel node. (You can use the same node name in a deeper level in the same content branch. Notice that in this content branch, two nodes are named items.)  

5. Create a node named image1 (nodetype cq:Widget) under the items node. Assign these properties to the image1 node. This node is the textfield control on the CQ dialog box. This control lets an author enter a description for image 1 in the carousel control. This value is displayed in the carousel control.

Name Type   Value Description
xtype String textfield
Defines the type of widget as defined by the JSExt library.  
fieldLabel String Image1 Defines the label of the control.  
name String ./image1 For thie property, specify ./<the name of the node>.  

6. Repeat step 5 and enter a textfield xtype for image 2 through image 5.  

Modify the existing templateCarousel component 

Modify the existing templateCarousel.jsp to support the paragraph system and the sidekick. Simply add the following JavaScript code to this page.  

<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<html>
<head>
<title>AEM Custom Carousel page</title>
</head>
<body>
<h2>This page lets you drag and drop the carousel component from the CQ sidekick</h2>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Modify the templateCarousel file:

  1. To view the welcome page, enter the URL: http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite (If you are using AEM 5.6, click Tool in the left menu).
  3. Double-click apps/carousel/components/page/templateCarousel/templateCarousel.jsp.
  4. Replace the JSP code with the new code shown in this section.
  5. Click Save All.

 

Modify the component JS code to use dialog properties

Modify the Carousel.jsp file located at /apps/carousel/components/carousel/carousel.jsp to include dialog properties. This is how you can retrieve the values that an AEM author enters into a dialog in your components. For exampls, an author enters a description of an image into the image1 text field located in the AEM dialog.

To retrieve this value in your code, you use this sling command in your JavaScript code:

properties.get("image1", "Default Image")

Replace the Carousel.jsp with the following code.

<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adobe Experience Manager Custom Carousel Demo</title>

<script type="text/javascript">
$(function(){
    $('#carousel').infiniteCarousel({
        displayTime: 6000,
        textholderHeight : .25
    });
});
</script>
<style type="text/css">
body {
    padding-top: 50px;
}
#carousel {
    margin: 0 auto;
    width: 400px;
    height: 390px;
    padding: 0;
    overflow: scroll;
    border: 2px solid #999;
}
#carousel ul {
    list-style: none;
    width: 1500px;
    margin: 0;
    padding: 0;
    position: relative;
}
#carousel li {
    display: inline;
    float: left;
}
.textholder {
    text-align: left;
    font-size: small;
    padding: 6px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
}
</style>
</head>

<body>

<div id="carousel">
    <ul>
        <li><img alt="" src="/content/dam/travel/1.jpg" width="500" height="213" /><p><%=properties.get("image1", "Travel pic 1") %></p>
        </li>
        <li><img alt="" src="/content/dam/travel/2.jpg" width="500" height="213" /><p><%=properties.get("image2", "Travel pic 2") %></p>
        </li>
         <li><img alt="" src="/content/dam/travel/3.jpg" width="500" height="213" /><p><%=properties.get("image3", "Travel pic 3") %></p>
        </li>
        <li><img alt="" src="/content/dam/travel/4.jpg" width="500" height="213" /><p><%=properties.get("image4", "Travel pic 4") %></p>
        </li>
         <li><img alt="" src="/content/dam/travel/5.jpg" width="500" height="213" /><p><%=properties.get("image5", "Travel pic 5") %></p>
        </li>
    </ul>
</div>
<h3>This is an AEM example that uses five images retrieved from the CQ DAM and displayed within a custom Carousel component.</h3>

</body>
</html>

Modify the carousel.jsp file:

 

  1. To view the welcome page, enter the URL: http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite (If you are using AEM 5.6, click Tool in the left menu).
  3. Double-click /apps/carousel/components/carousel/carousel.jsp.
  4. Replace the JSP code with the new code shown in this section.
  5. Click Save All.

Create a web page that uses the new component

The final task is to create a site that contains a page that is based on the templateCarousel (the template that you modified in this development article). This page will let you select the carousel component that you just created from the sidekick, as shown in the following illustration.

sidekick
Component located in the sidekick

Drag the carousel component onto the web page. Then double click on the component to see the dialog.  You can enter values into the dialog as shown in the following illustration.  

DialogValues


The values that you enter into the dialog are displayed in the custom carousel component as shown in this illustration (notice that the value entered for image1 is displayed).

componentVal


Create a web page that displays the custom carousel component:

  1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Websites. (If you are using AEM 5.6, click Tools from the menu on the left.)
  3. From the left hand pane, select Websites.
  4. Select New Page.
  5. Specify the title of the page in the Title field.
  6. Specify the name of the page in the Name field.
  7. Select templateCarousel from the template list that appears.
  8. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser. You should see a page similar to the previous illustration.

 

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