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

[pradeep8910]

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 

[pulkitvashisth]

Hi @pradeep8910 
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]

Hi @pradeep8910 
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

[Raja_Reddy]

Hi @pradeep8910 
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