How to add data to nested component?

[sean12341]

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.

<div data-sly-resource="${'button' @ resourceType='core/wcm/components/button/v1/button'}"></div>

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 solution]

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]

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

[kautuk_sahni]

@sean12341 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.