Dynamic Component which would read properties from ContentFragment and render OOTB teaser component

Forum|Forum|1 year ago
July 2, 2024
3 replies
758 views

I was looking at options to read data from contentfragment and populate the teaser component using data-sly-resource by using ResoruceWrapper with dynamic properties being "title","description", "imagePath"

is this possible in AEM ? Please let me know if you have any references on this.

@arunpatidar @estebanbustamante @aanchal-sikka

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 arunpatidar

Hi @pradeep_varmape
Technically it is possible, you need to update the teaser component to browse CF and read the specific property and map to getters.

the tricky part would be the image, right now teaser component uses adaptive image servlet, which required image is stored in the fileReference property with resourcetype of image component.

You can try to use ResourceWrapper(ForcedResourceType) to adapt CF as image component.

I have not tried this whole approach but you can try and let us know if you face any issues

pulkitvashisth

Community Advisor

Hi @pradeep_varmape
I believe you are coming from this blog :
https://techrevel.blog/2023/09/25/adaptive-image-rendering-via-delegation-for-aem-components/

If not , you can go have a look.
The fact is, also what is stated at above page, data-sly-resource expects a static reference to a resource path or component. It doesn't support dynamic manipulation of properties. @arunpatidar Let me know if I am wrong or if there is a workaround.

In your use case Pradeep, best would be to create a sling model adapter for your content fragments and then use that adapter to adapt your content fragment resources and return them via your teaser component sling model getter methods. The sling model adapter for your contentFragment improves reusability and expedites development.

arunpatidar

Accepted solution

Community Advisor

Hi @pradeep_varmape
Technically it is possible, you need to update the teaser component to browse CF and read the specific property and map to getters.

the tricky part would be the image, right now teaser component uses adaptive image servlet, which required image is stored in the fileReference property with resourcetype of image component.

You can try to use ResourceWrapper(ForcedResourceType) to adapt CF as image component.

I have not tried this whole approach but you can try and let us know if you face any issues

Arun Patidar

Raja_Reddy

Community Advisor

Hi @pradeep_varmape
yes, it is possible content fragment and populate a teaser component using data-sly-resource with dynamic properties.

You can use a ResourceWrapper to wrap the content fragment and expose its properties as dynamic properties

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class TeaserModel {

    @Inject
    private Resource resource;

    public String getTitle() {
        Resource contentFragment = resource.getChild("contentfragment");
        if (contentFragment != null) {
            ValueMap properties = contentFragment.adaptTo(ValueMap.class);
            return properties.get("title", String.class);
        }
        return null;
    }

    public String getDescription() {
        Resource contentFragment = resource.getChild("contentfragment");
        if (contentFragment != null) {
            ValueMap properties = contentFragment.adaptTo(ValueMap.class);
            return properties.get("description", String.class);
        }
        return null;
    }

    public String getImagePath() {
        Resource contentFragment = resource.getChild("contentfragment");
        if (contentFragment != null) {
            ValueMap properties = contentFragment.adaptTo(ValueMap.class);
            return properties.get("imagePath", String.class);
        }
        return null;
    }

    public Resource getContentFragment() {
        return resource.getChild("contentfragment");
    }
}

we are using the @Model annotation to create a Sling Model for the teaser component. We are injecting the current resource using @Inject and then using a @ResourceWrapper to wrap the content fragment and expose its properties as dynamic properties.
use these dynamic properties in the data-sly-resource call

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded