Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

Extend the core carousel component Model for reading the child items.

Avatar

Level 2

Hello All,

 

I have a requirment to overlay carousel core component and add custom components to it. Here I want to update the carousel items reading logic.

Could please any one help to where we need to update the code. i don't see any method for reading child items in carousel sling model class.

 only sling model expoter is showing the data in edit mode.

below image contains 3 images (item_***) inside carousel.  i want to perform some logic on item nodes and return the list to carousel. 

 

Screenshot 2023-04-03 at 12.37.43 AM.png

 

Appriciate for your help.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @Naresh536 ,
I just created a fresh project with the below command,

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
    -D archetypeGroupId=com.adobe.aem \
    -D archetypeArtifactId=aem-project-archetype \
    -D archetypeVersion=40 \
    -D appTitle="My Project" \
    -D appId="my-project" \
    -D groupId="com.my.project" \
    -D artifactId="my-project" \
    -D package="com.my.project" \
    -D version="0.0.1-SNAPSHOT" \
    -D aemVersion="6.5.14"

 

Here is the link to how you can customize the tab container Items: https://github.com/Sady-Rifat/my-project 

 

Sady_Rifat_0-1680847118498.png

 

View solution in original post

10 Replies

Avatar

Level 1

Look at the getItems() Method inherited from Container-Model. It is also used by the htl to iterate trough the children.

Avatar

Level 2

@walterch , 

 

Could you please explain from where this container model is calling from carousel htl. 

 

Avatar

Community Advisor

Hello, the carousel component was inherited from the PanelContainer component. That component is responsible for reading the list.

Sady_Rifat_0-1680592603871.png

 

See the Caurosel component Model Class that extends the AbstractPanelContainerImpl.

 

public class CarouselImpl extends AbstractPanelContainerImpl implements Carousel

 

https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w...

 


Reading List: https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w... 

So you need to overwrite the AbstractPanelContainerImpl function.

Avatar

Level 2

Hi @Sady_Rifat ,

 

So we have to override the Carouse and CarouseImpl and AbstractPanelContainerImpl implementations correct.

Could you confirm we have to  override the below. 

public interface Carousel extends PanelContainer {
 

public class CarouselImpl extends AbstractPanelContainerImpl implements Carousel {}

 

If extends the panelContainer we are getting the below 

com.adobe.cq.wcm.core.components.internal.models.v1 can't be resolved.

Could you please help me to resolve.

In general all models/classes located under internal package are not exported by Core Components bundles. This means you cannot use them directly (despite the fact that you can do it on your IDE). 

 

Thanks for help.

Avatar

Community Advisor

You are right, "all models/classes located under internal package are not exported by Core Components bundles". This is not the way we extend the core component functionality.
Here are the steps you can follow.
1. Create your own Extended interface

Sady_Rifat_0-1680672559674.png

2. Implement the interface

Sady_Rifat_1-1680672926403.png

Overwrite other necessary methods and return coreCorousel.thatMethod()

3. Use your custom model from HTL

 

Mainly your targeting function is this one

Sady_Rifat_2-1680673117020.png

Hope this will help you.

Avatar

Level 2

Hi @Sady_Rifat ,

Thanks for responding ...

I have followed the same steps but getting the exception :

org.apache.sling.scripting.sightly.SightlyException: Identifier com.cms.aem.core.models.CarouselCustom cannot be correctly instantiated by the Use API
at org.apache.sling.scripting.sightly.impl.engine.extension.use.UseRuntimeExtension.call(UseRuntimeExtension.java:76) [org.apache.sling.scripting.sightly:1.4.20.140]
at org.apache.sling.scripting.sightly.impl.engine.runtime.RenderContextImpl.call(RenderContextImpl.java:72) [org.apache.sling.scripting.sightly:1.4.20.140]
at org.apache.sling.scripting.sightly.apps.com.core__002d__components.carousel.carousel__002e__html.render(carousel__002e__html.java:45)
at org.apache.sling.scripting.sightly.render.RenderUnit.render(RenderUnit.java:53) [org.apache.sling.scripting.sightly.runtime:1.2.6.140]
at org.apache.sling.scripting.sightly.impl.engine.SightlyCompiledScript.eval(SightlyCompiledScript.java:61) [org.apache.sling.scripting.sightly:1.4.20.140]
at org.apache.sling.scripting.core.impl.DefaultSlingScript.call(DefaultSlingScript.java:393) [org.apache.sling.scripting.core:2.4.8]

Caused by: java.lang.IllegalArgumentException: com.cms.aem.core.models.CarouselCustom represents an interface or an abstract class which cannot be instantiated.
at org.apache.sling.scripting.sightly.impl.engine.extension.use.JavaUseProvider.loadObject(JavaUseProvider.java:215) [org.apache.sling.scripting.sightly:1.4.20.140]
at org.apache.sling.scripting.sightly.impl.engine.extension.use.JavaUseProvider.provide(JavaUseProvider.java:130) [org.apache.sling.scripting.sightly:1.4.20.140]

Avatar

Community Advisor

 

Getting this error is a little bit weird. I hope you correctly add the dependency of the core component which has no conflict which was installed previously. 

org.apache.sling.scripting.sightly.SightlyException: Identifier com.adobe.cq.wcm.core.components.models.Carousel cannot be correctly instantiated by the Use API
<dependency>
    <groupId>com.adobe.cq</groupId>
    <artifactId>core.wcm.components.core</artifactId> 
    <version>${core.wcm.components.version}</version>
</dependency>

 

Avatar

Level 2

@Sady_Rifat , 

if possible could you please share the package if you done earlier.  when i call customCarousel from htl ,  Authoring expirence got broken .

 

it's really helpfull if you can share the package.

Avatar

Correct answer by
Community Advisor

Hello @Naresh536 ,
I just created a fresh project with the below command,

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
    -D archetypeGroupId=com.adobe.aem \
    -D archetypeArtifactId=aem-project-archetype \
    -D archetypeVersion=40 \
    -D appTitle="My Project" \
    -D appId="my-project" \
    -D groupId="com.my.project" \
    -D artifactId="my-project" \
    -D package="com.my.project" \
    -D version="0.0.1-SNAPSHOT" \
    -D aemVersion="6.5.14"

 

Here is the link to how you can customize the tab container Items: https://github.com/Sady-Rifat/my-project 

 

Sady_Rifat_0-1680847118498.png