15 Replies Latest reply on Jan 14, 2019 1:13 PM by sunitac70336244

    Issue with Custom Carousel in AEM 6.4

    sunitac70336244 Level 1

      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="&amp;#8482; &amp;nbsp;"/>

                                                                  <copyright

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#169; &amp;nbsp;"/>

                                                                  <registered

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#174; &amp;nbsp;"/>

                                                                  <mdash

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#151; &amp;nbsp;"/>

                                                                  <leftdoublequote

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#8220; &amp;nbsp;"/>

                                                                  <rightdoublequote

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#8221; &amp;nbsp;"/>

                                                                  <servicemark

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#8480; &amp;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#subsc ript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findrepl ace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourcee dit,#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="&amp;#8482; &amp;nbsp;"/>

                                                                  <copyright

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#169; &amp;nbsp;"/>

                                                                  <registered

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#174; &amp;nbsp;"/>

                                                                  <mdash

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#151; &amp;nbsp;"/>

                                                                  <leftdoublequote

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#8220; &amp;nbsp;"/>

                                                                  <rightdoublequote

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#8221; &amp;nbsp;"/>

                                                                  <servicemark

                                                                      jcr:primaryType="nt:unstructured"

                                                                      entity="&amp;#8480; &amp;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#subsc ript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findrepl ace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourcee dit,#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