How to add data to nested component?

Question

I am using AEM Cloud and I want to embed one component in another component. They can share the `cq_dialog` of the parent component but I will need to pass some properties values into the nested component, such as text for a nested Button or url for an Image component. By reading this and this post, I know that we can use `data-sly-resource` like below to render a core Button component.

However, it just renders as a blank sub-component. In this case, a blank button without title or link. Maybe I am misunderstanding the `data-sly-resource` attribute, but I don't see the point of rendering a component without adding values to it. How can we pass in property values to the nested components so they render correctly? Thank you,

aanchal-sikka · Accepted Answer

Hello @sean12341

The data-sly-resource informs AEM to render a resource using a specific resourceType.

It cannot pass values from parent container to this component. One choice can be to use Synthetic resource and then use it for rendering.

    private void createSyntheticResource(String imagePath, String path) {
        ValueMap properties = new ValueMapDecorator(new HashMap<>());
        properties.put(<BUTTON_PROPERTY>, <BUTTON_PROPERTY_VALUE>);
        imageResource = new ValueMapResource(resourceResolver, <parent_component>, BUTTON_RESOURCE_TYPE, properties);
    }

Return this Resource from Sling Model

    default Resource getButtonResource() {
        throw new UnsupportedOperationException();
    }

Then render it using Sightly

<sly data-sly-template.button="${@ model}">
    <div data-sly-test="${model.buttonResource}" data-sly-resource="${model.buttonResource@wcmmode=disabled}"></div>
</sly>

Mahedi_Sabuj · Answer

Hi @sean12341, You can add default content to nested components using cq:template. For a detailed step-by-step guide, you can refer to this resource: http://prashantonkar.blogspot.com/2019/01/composite-components-in-aem-using.html

Sign up

Login with SSO

Login to the community

Login with SSO