Integrating Custom Multi Field Component with Custom Carousel components | Community
Skip to main content
T
Titus_Roby_K
Level 2
June 7, 2018
Solved

Integrating Custom Multi Field Component with Custom Carousel components

  • June 7, 2018
  • 4 replies
  • 3191 views

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

Adobe Experience Manager Help | Adding a Custom Carousel Component to the Experience Manager Toy Site

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

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

that uses Sling Models

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>

4 replies

smacdonald2008
smacdonald2008
Level 10
June 7, 2018

I see - you are tying to modify the Carousel - (we hard coded the logic) so it reads from a MF dialog. Interesting...

Have you used Sling Models to read the MF - as discussed here:  Adobe Experience Manager Help | Creating a HTL Repeating Data Set 6.3 Component that uses Sling Models.

You can inject the Node that represents the Multi Field into the SLing Model. I suspect that is your issue.

smacdonald2008
smacdonald2008
Level 10
June 7, 2018

I am working on this use case -- I will post back the results...

smacdonald2008
smacdonald2008Accepted solution
Level 10
June 7, 2018

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

that uses Sling Models

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>

smacdonald2008
smacdonald2008
Level 10
June 8, 2018

We will capture this all in an AEM 6.4 HELPX article.

Terms & ConditionsAccessibility statement

Loading footer...