Issue with Custom Carousel in AEM 6.4
Dear All, Currently I am developing custom carousel. Below are the details of the component.
My Custom Dialog in Touch UI
<?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="Hero Poster Marquee"
sling:resourceType="cq/gui/components/authoring/dialog"
extraClientlibs="[sunita.landing.poster1]"
width="900px">
<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">
<carousel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Carousel Slides">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./NestedSlides">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<headerSize
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Header Size"
name="./headerSize">
<items jcr:primaryType="nt:unstructured">
<font32
jcr:primaryType="nt:unstructured"
text="Font Size-32,Line-height-46"
value="hero-title32"/>
<font45
jcr:primaryType="nt:unstructured"
defaultValue="true"
text="Font Size-45,Line-height-46"
value="hero-title45"/>
<font50
jcr:primaryType="nt:unstructured"
defaultValue="true"
text="Font Size-50,Line-height-60"
value="hero-title50"/>
</items>
</headerSize>
<paragraphSize
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Paragraph size"
name="./paragraphSize">
<items jcr:primaryType="nt:unstructured">
<font32
jcr:primaryType="nt:unstructured"
text="Font Size-32,Line-height-46"
value="hero-title32"/>
<font45
jcr:primaryType="nt:unstructured"
defaultValue="true"
text="Font Size-45,Line-height-46"
value="hero-title45"/>
<font50
jcr:primaryType="nt:unstructured"
defaultValue="true"
text="Font Size-50,Line-height-60"
value="hero-title50"/>
</items>
</paragraphSize>
<backgroundimage
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldLabel="Background Image"
name="./bgImage"
rootPath="/content/dam/sunita"/>
<sloganImage
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldLabel="Invest With Confidence Slogan"
name="./sloganImage"
rootPath="/content/dam/sunita/slogans"/>
<investcopyrightimage
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/radiogroup"
name="./investimage"
text="Invest With Confidence Image">
<items jcr:primaryType="nt:unstructured">
<none
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/radio"
defaultValue="true"
text="None"
value="1"/>
<top
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/radio"
text="Top"
value="2"/>
<bottom
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/radio"
text="Bottom"
value="3"/>
</items>
</investcopyrightimage>
<includeChooseSite
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./chooseSite"
text="Include Choose Site?"
value="{Boolean}true"/>
<header
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldLabel="Section Header"
name="./title"
useFixedInlineToolbar="{Boolean}true">
<rtePlugins jcr:primaryType="nt:unstructured">
<format
jcr:primaryType="nt:unstructured"
features="*"/>
<justify
jcr:primaryType="nt:unstructured"
features="*"/>
<lists
jcr:primaryType="nt:unstructured"
features="*"/>
<paraformat
jcr:primaryType="nt:unstructured"
features="*"/>
<links
jcr:primaryType="nt:unstructured"
features="*"/>
<image
jcr:primaryType="nt:unstructured"
features="*"/>
<findreplace
jcr:primaryType="nt:unstructured"
features="*"/>
<subsuperscript
jcr:primaryType="nt:unstructured"
features="*"/>
<spellcheck
jcr:primaryType="nt:unstructured"
features="*"/>
<misctools
jcr:primaryType="nt:unstructured"
features="*">
<specialCharsConfig jcr:primaryType="nt:unstructured">
<chars jcr:primaryType="nt:unstructured">
<trademark
jcr:primaryType="nt:unstructured"
entity="&#8482; &nbsp;"/>
<copyright
jcr:primaryType="nt:unstructured"
entity="&#169; &nbsp;"/>
<registered
jcr:primaryType="nt:unstructured"
entity="&#174; &nbsp;"/>
<mdash
jcr:primaryType="nt:unstructured"
entity="&#151; &nbsp;"/>
<leftdoublequote
jcr:primaryType="nt:unstructured"
entity="&#8220; &nbsp;"/>
<rightdoublequote
jcr:primaryType="nt:unstructured"
entity="&#8221; &nbsp;"/>
<servicemark
jcr:primaryType="nt:unstructured"
entity="&#8480; &nbsp;"/>
</chars>
</specialCharsConfig>
</misctools>
<styles
jcr:primaryType="nt:unstructured"
features="*">
<styles jcr:primaryType="cq:WidgetCollection">
<NimusSansRegular/>
<NimusSansBold/>
<NimusSansLight/>
<NimusSansItalic/>
<NimusSansBoldItalic/>
<NimusSansCon/>
<NimusSansBoldCon/>
</styles>
</styles>
</rtePlugins>
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat]">
<popovers jcr:primaryType="nt:unstructured">
<justify
jcr:primaryType="nt:unstructured"
items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
ref="justify"/>
<lists
jcr:primaryType="nt:unstructured"
items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
ref="lists"/>
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
<styles
jcr:primaryType="nt:unstructured"
items="styles:getStyles:styles-pulldown"
ref="styles"/>
</popovers>
</inline>
</cui>
</uiSettings>
</header>
<title
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldLabel="Section Paragraph"
name="./heading"
useFixedInlineToolbar="{Boolean}true">
<rtePlugins jcr:primaryType="nt:unstructured">
<format
jcr:primaryType="nt:unstructured"
features="*"/>
<justify
jcr:primaryType="nt:unstructured"
features="*"/>
<lists
jcr:primaryType="nt:unstructured"
features="*"/>
<paraformat
jcr:primaryType="nt:unstructured"
features="*"/>
<links
jcr:primaryType="nt:unstructured"
features="*"/>
<image
jcr:primaryType="nt:unstructured"
features="*"/>
<findreplace
jcr:primaryType="nt:unstructured"
features="*"/>
<subsuperscript
jcr:primaryType="nt:unstructured"
features="*"/>
<spellcheck
jcr:primaryType="nt:unstructured"
features="*"/>
<misctools
jcr:primaryType="nt:unstructured"
features="*">
<specialCharsConfig jcr:primaryType="nt:unstructured">
<chars jcr:primaryType="nt:unstructured">
<trademark
jcr:primaryType="nt:unstructured"
entity="&#8482; &nbsp;"/>
<copyright
jcr:primaryType="nt:unstructured"
entity="&#169; &nbsp;"/>
<registered
jcr:primaryType="nt:unstructured"
entity="&#174; &nbsp;"/>
<mdash
jcr:primaryType="nt:unstructured"
entity="&#151; &nbsp;"/>
<leftdoublequote
jcr:primaryType="nt:unstructured"
entity="&#8220; &nbsp;"/>
<rightdoublequote
jcr:primaryType="nt:unstructured"
entity="&#8221; &nbsp;"/>
<servicemark
jcr:primaryType="nt:unstructured"
entity="&#8480; &nbsp;"/>
</chars>
</specialCharsConfig>
</misctools>
<styles
jcr:primaryType="nt:unstructured"
features="*">
<styles jcr:primaryType="cq:WidgetCollection">
<NimusSansRegular/>
<NimusSansBold/>
<NimusSansLight/>
<NimusSansItalic/>
<NimusSansBoldItalic/>
<NimusSansCon/>
<NimusSansBoldCon/>
</styles>
</styles>
</rtePlugins>
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat]">
<popovers jcr:primaryType="nt:unstructured">
<justify
jcr:primaryType="nt:unstructured"
items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
ref="justify"/>
<lists
jcr:primaryType="nt:unstructured"
items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
ref="lists"/>
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
<styles
jcr:primaryType="nt:unstructured"
items="styles:getStyles:styles-pulldown"
ref="styles"/>
</popovers>
</inline>
</cui>
</uiSettings>
</title>
</items>
</column>
</items>
</field>
</carousel>
</items>
</column>
</items>
</content>
</jcr:root>
My Custom landing-poster-carousel.html Contents
<sly data-sly-use.carousel = "com.aem.sunita.pojo.Carousel1"/>
<div id="myCarousel" class="carousel-eb carousel slide" data-ride="carousel">
<sly data-sly-test="${carousel.slidesList}">
<div class="carousel-inner ${properties.addPadding ? 'carousel-inner-eb' : ''}" role="listbox">
<sly data-sly-list="${carousel.slidesList}">
<div class="item ${item.count == '0' ? 'active' : ''}">
<img class="hero_marquee" src="${item.bgImage}">
<!--<div class="centered"><p>asdfdddddddddd</p></div>-->
<div class="centered">
<span class="${properties.headerSize}">${item.title @context='html'}</span><br>
<span class="${properties.paragraphSize}">${carousel.heading @context='html'}</span>
</div>
</div>
</sly>
</div>
</sly>
<sly data-sly-test.slide="${carousel.slidesList}">
<sly data-sly-test="${slide.size > 1}">
<a id="left" class="left carousel-control ${properties.addPadding?'':'carousel-control-np'} left-arrow ${item.count}" href="#myCarousel" data-slide="prev" >
<em class="fa fa-angle-left"></em>
</a>
<a id="right" class="right carousel-control ${properties.addPadding? '' :'carousel-control-np'} right-arrow" href="#myCarousel" data-slide="next" >
<em class="fa fa-angle-right"></em>
</a>
<div class="${properties.addPadding? '' : 'indicator-eb' }">
<ol class="carousel-indicators">
<sly data-sly-list="${carousel.slidesList}">
<li data-target="#myCarousel" data-slide-to="${item.count}" class="${item.count == '0' ? 'active' : ''}"></li>
</sly>
</ol>
</div>
</sly>
</sly>
</div>
<style>
#hero_marquee {
background-image: url('${properties.bgImage @context='uri'}');
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.learn-more {
font-size:18px;
text-decoration: none;
background-image: url("/content/dam/sunita/an-arrow-nb.png") !important;
background-position: right center;
background-repeat: no-repeat;
}
@media screen and (max-width: 550px) {
#hero_marquee .phone-background-image{
background-image: url('${properties.bgImage @context='uri'}');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
}
</style>
My Java Class file is below
package com.aem.sunita.pojo;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ValueMap;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.adobe.cq.sightly.WCMUsePojo;
public class Carousel1 extends WCMUsePojo{
private static Logger LOG = LoggerFactory.getLogger(Carousel1.class);
private List<Map<String, String>> slidesList = new ArrayList<Map<String, String>>();
private String flag = "flase";
private String title;
private String heading;
@Override
public void activate() throws Exception {
Resource currentResource = getResource();
LOG.info("currentResource123 == " + currentResource);
Resource multifieldPropRes = currentResource.getChild("NestedSlides");
LOG.info("multifieldPropRes123 == " + multifieldPropRes);
if(multifieldPropRes != null) {
Iterator<Resource> itr = multifieldPropRes.listChildren();
int count = 0;
int index = 0;
while (itr.hasNext()) {
Resource childRes = itr.next();
LOG.info("childRes123 == " + childRes);
ValueMap properties = childRes.getValueMap();
Map<String,String> jsonMap = new HashMap<String,String>();
LOG.info("properties123 == " + properties);
if(properties.get("bgImage") != null) {
jsonMap.put("bgImage", properties.get("bgImage").toString());
}
if(properties.get("title") != null) {
jsonMap.put("title", properties.get("title").toString());
}
/*if(properties.get("heading") != null) {
jsonMap.put("heading", properties.get("heading").toString());
}*/
String propHeading = getProperties().get("heading", String.class);
if (propHeading != null) {
String newHeading = propHeading.replaceFirst("<p>", "");
if (newHeading.contains("<p>")) {
heading = propHeading;
jsonMap.put("heading", heading);
} else {
heading = newHeading.replaceFirst("</p>", "");
jsonMap.put("heading", heading);
}
}
if(index >1) {
flag = "true";
}
jsonMap.put("flag",flag);
jsonMap.put("count", Integer.toString(count));
count++;
index++;
slidesList.add(jsonMap);
}
}
}
public List<Map<String, String>> getSlidesList() {
return slidesList;
}
}
The issue is here that when I am calling the heading from my java class carousel1 , as shown in below then it is not coming. But if I am calling the heading from item from dialog then , it is coming fine. I feel I am missing something , but not able to figure out. Can anybody please help me on this. It is urgent
<span class="${properties.headerSize}">${item.title @context='html'}</span><br> ---> It is coming fine.
<span class="${properties.paragraphSize}">${carousel.heading @context='html'}</span> ---> It is not coming fine.
Thanks & Regards
Sonu
