Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
Integrating Custom Multi Field Component with Custom Carousel components
Referring to two articles provided in the forum , I tried to integrate Custom MultiField Component with a Custom Carousel Component.
Where the multifield component is used to add 'N' number of image paths which will be subsequently used in the Custom Carousel Component.
Following is my editDialogue Box
And i referred this article to create custom Carousel component : https://helpx.adobe.com/experience-manager/using/toystore_carousel.html
Following is a part of my HTML file that i used
<body>
<div style="width: 1000px; background-color:#fff" data-sly-use.carouselObj="com.ihcl.core.models.GalleryCarousel">
<div id="carousel">
<ul data-sly-list.imageList="${carouselObj.getImageObjList}">
<div style="width:1000px; font-family: Calibri; font-size: 34px; background-color:#fff font-weight: bold; color: #4a4a4a; margin-bottom: 16px;">${imageList.getTitle}</div>
<div style=" display: block; color: #323232; ">${imageList.getDescription}</div>
<li> <img alt="" src="${imageList.getImagepath}" width="683" height="555" /></li>
</ul>
</div>
</div>
</body>
Problem : My title, description and image seems to break at different circumstances, while scrolling or moving back and forth to another image, the previous image's title seems to disappear.
What modification could i do make this component work ?
Thanks in Advance.
1 Accepted Solution
Correct answer by
I got it to work - see this video....
Create the Sling Model class - as shown in the artilce -- Scott's Digital Community: Creating a HTL Repeating Data Set 6.3 Component
Java Code.
package com.adobe.community.car.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
}
Install the package from the posted artilce. You will have an AEM Multi field within the Touch UI dialog with Products as the node -- as shown here.
Now code the HTL front end like this -- (see car2.html above)
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='cq.jquerycar'}" data-sly-unwrap/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adobe Experience Manager Custom Carousel Demo</title>
<script type="text/javascript">
$(document).ready(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>
<p>jj</p>
<div id="carousel">
<div style="height:250px;">
<ul>
<div data-sly-use.multiItems="com.adobe.community.car.core.models.Multifield">
<div data-sly-list.head="${multiItems.products.listChildren}">
<li>
<img alt="" src=${head.pathbr} height=200 width=270 style="padding:4px"/><p>${head.desc}</p>
</li>
</div>
</div>
</div>
</ul>
</div>
</body>
Correct answer by
I got it to work - see this video....
Create the Sling Model class - as shown in the artilce -- Scott's Digital Community: Creating a HTL Repeating Data Set 6.3 Component
Java Code.
package com.adobe.community.car.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
}
Install the package from the posted artilce. You will have an AEM Multi field within the Touch UI dialog with Products as the node -- as shown here.
Now code the HTL front end like this -- (see car2.html above)
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='cq.jquerycar'}" data-sly-unwrap/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adobe Experience Manager Custom Carousel Demo</title>
<script type="text/javascript">
$(document).ready(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>
<p>jj</p>
<div id="carousel">
<div style="height:250px;">
<ul>
<div data-sly-use.multiItems="com.adobe.community.car.core.models.Multifield">
<div data-sly-list.head="${multiItems.products.listChildren}">
<li>
<img alt="" src=${head.pathbr} height=200 width=270 style="padding:4px"/><p>${head.desc}</p>
</li>
</div>
</div>
</div>
</ul>
</div>
</body>
Related Conversations
