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

[Naresh536]

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. 

 

Appriciate for your help.

[walterch]

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

[Naresh536]

@walterch , 

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

[Sady_Rifat]

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

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.

[Naresh536]

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.

[Sady_Rifat]

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

2. Implement the interface

Overwrite other necessary methods and return coreCorousel.thatMethod()

3. Use your custom model from HTL

Mainly your targeting function is this one

Hope this will help you.

[Naresh536]

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]

[Sady_Rifat]

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>

[Naresh536]

Yes. pom up to date. 

version 2.22.0.

[Naresh536]

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

[Sady_Rifat · Accepted solution]

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