Adobe Experience Manager Sites & More

sunitac70336244 · 1/10/19

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">

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<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">

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<headerSize

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

fieldLabel="Header Size"

name="./headerSize">

<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">

<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">

<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">

<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="*">

<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>

</rtePlugins>

<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]">

<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">

<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="*">

<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>

</rtePlugins>

<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]">

<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

<span class="${properties.headerSize}">${item.title @context='html'}</span><br>

<span class="${properties.paragraphSize}">${carousel.heading @context='html'}</span>

</div>

</sly>

</div>

</sly>

</a>

</a>

</sly>

</ol>

</div>

</sly>

</div>

<style>

#hero_marquee {

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-position: right center;

background-repeat: no-repeat;

}

@media screen and (max-width: 550px) {

#hero_marquee .phone-background-image{

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

Gaurav-Behl · 1/14/19

Screenshots from WKND site -

View solution in original post

arunpatidar · 1/11/19

Hi,

Please check below to find out how to iterate map in HTL.

Sightly : How to Iterate through Map<String , Map>

Arun Patidar

sunitac70336244 · 1/11/19

Hi Arun,

Thanks a lot for the response. I will look into the above URL and let everybody know.

Dear All,

Is there any good example of custom carousel in AEM 6.4 ?

smacdonald2008 · 1/11/19

For AEM 6.4 - the AEM Team strongly suggests that you use the CORE CAROUSEL Component -

Working with Adobe Experience Manager Carousel Core Components

Hope this helps...

sunitac70336244 · 1/14/19

Dear All,

Thanks for all of your response. Our business wants to put pause/Resume functionality in Carousel.

As I know Core Carousel component does not have pause/resume functionality.

Can you please let us know how we can achieve this functionality in CORE Carousel.

Also anybody has any example of Carousel with Pause/Resume functionality ?

smacdonald2008 · 1/14/19

As you stated, Core Component does not have that functionality. We do not have examples of that either. If you need that - you may have to look at using other Carousel libs - like a JQuery plug-in that supports that.

Gaurav-Behl · 1/14/19

Could you provide more details on what kind of pause/resume functionality is missing in carousel component?

I can see that pause and play (aka resume) buttons are available in source code. Test it on pub or with wcmmode=disabled on author as the code has a check of edit/preview mode

aem-core-wcm-components/carousel.html at master · adobe/aem-core-wcm-components · GitHub

sunitac70336244 · 1/14/19

Hi Gaurav,

When I am working on core carousel component then , I am not able to see any Play "or" pause button like below.

Author wants Play and Pause button in the carousel slide , as shown above. This feature is not available.

Did you test in AEM 6.4 author environment and able to get this pause/play button. Can you please share the screenshot.

Gaurav-Behl · 1/14/19

Enable auto-transition in the dialog of carousel, specify transition time, say 2 seconds.

Try it on publish server or append wcmmode=disabled in the url. It wouldn't auto-play on EDIT and PREVIEW modes on author because of mode check condition in the source code

data-cmp-autoplay="${(wcmmode.edit || wcmmode.preview) ? '' : carousel.autoplay}"

Gaurav-Behl · 1/14/19

Screenshots from WKND site -

smacdonald2008 · 1/14/19

Nice response!

sunitac70336244 · 1/14/19

Thanks Gaurav.

For me Disable automatic pause on hover is not coming. I am using AEM 6.4 only. I have not installed SP2.

Do you have tested in AEM 6.4 SP2 ??

smacdonald2008 · 1/14/19

Try installing 6.4.2

sunitac70336244 · 1/14/19

Sure , I will coordinate with AMS for SP2 installation.

Gaurav-Behl · 1/14/19

The screenshots are from 6.4.3

The code is from core components 2.2.2 so it may happen that 6.4.2 would have 2.2.0 which has a bit different options.

You may try for SP3 or 2.2.2 with SP2 if you/your project is fine with it.

sunitac70336244 · 1/14/19

Yes Correct , As we have 2.2.0 core component in our AEM 6.4. Sure we will check for 2.2.2.

Adobe Experience Manager Sites & More

Issue with Custom Carousel in AEM 6.4

Arun Patidar

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe