Hi, what I want to do is to modify the Container component method so that the background asset that the user uploaded is transformed to webp through the adobe API.
This component have a few modifications in the design of the authoring dialog so is a proxy component.
I have investigated how to extend or modify core components but my problem is the following:
From what I read from the documentation, this is the sling model of Container:
Being the variable:
backgroundImageReference
The user's asset (being like the fileReference that is usually called like this in other components)
The thing here, is that this model doesn't include the getter method of backgroundImageReference (the user asset) to be able to modify it and add the API to convert to webp.
Instead, what it does is that the variable of the backgroundImageReference asset is renamed with the name: PN_BACKGROUND_IMAGE_REFERENCE and sends it to another java class which is an Impl class called ContainerImpl which is the following one:
And when I want to import or access that class it doesn't let me, in fact it doesn't even exist to import but that class has the getter method where I need to add the API.
What can I do to access that method and be able to modify it?
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
Hello @Aaron_Dempwolff ,
You can not directly extend the ContainerImpl in your Java class. You can follow the Sling Delegation Pattern where you need to extend the Interface first then Implement your interface.
In the implementation, you just need to @Self annotation that will let your core implementation access.
Reference link: https://github.com/Sady-Rifat/aem-demo/commit/7047cd9dcb6601359f61d13b373da552272ca8cc
For use all the methods you can use @Delegate annotation that is in lombok.
Hi,
You need to use the delegation pattern, basically, you would need to extend and overwrite the methods you need to customize to achieve the behavior you are describing.
You can learn in detail how to do it here:
Hello @Aaron_Dempwolff ,
You can not directly extend the ContainerImpl in your Java class. You can follow the Sling Delegation Pattern where you need to extend the Interface first then Implement your interface.
In the implementation, you just need to @Self annotation that will let your core implementation access.
Reference link: https://github.com/Sady-Rifat/aem-demo/commit/7047cd9dcb6601359f61d13b373da552272ca8cc
For use all the methods you can use @Delegate annotation that is in lombok.
Understandable, don't you also know where I can find the html file of the container?
To modify the line of code to use my sling model like this:
data-sly-use.container="com.webpage.core.models.ContainerExtdModel"
Since I don't have the html file in my code
Hi @Aaron_Dempwolff ,
In your post, you are referring to the incorrect implementation class of bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Container.java model.
The correct Abstract Implementation class for Container.java interface is:
/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/AbstractContainerImpl.java
As @EstebanBustamante mentioned, you need to extend the v1/AbstractContainerImpl.java class and override the methods you need to customize to as per your need.
To modify the Container component in Adobe Experience Manager (AEM) and transform the uploaded background asset to WebP using Adobe APIs, you need to follow these steps:
Custom Sling Model: Create a custom Sling model that extends the existing Container component's model. In your custom model, add the necessary getter and setter methods for backgroundImageReference.
Custom Component Implementation: Extend the ContainerImpl class to accommodate the desired behavior. If it lacks required methods, create your own implementation by extending it in the correct package structure.
Dialog Customization: Customize the authoring dialog's XML and JavaScript to reflect the design changes you want.
API Integration: Use Adobe's API documentation to integrate the API calls required for converting images to WebP format within your custom model or implementation.
Deployment and Testing: Deploy your custom code in AEM and thoroughly test the modifications in a controlled environment.
Let me know if this info resolved your query !
Thanks