AEM - How to pass data to a component

1
votes

Usually an AEM component is retrieving its data from a JCR node, but I was wondering whether it's possible to pass data to it in HTL. Sure, there's data-sly-resource, but as far as I know this way you can only pass a JCR node.

So in an actual case I've got data in a model that's retrieved from elsewhere. Yet I'd like to use existing components. I'm aware that the data must at least match the component-types' model.

But what if the component I'd like to use is using an model that got its data injected like

@Inject
@Optional
String[] itemList;

So in my stubborn thoughts it should be possible to somehow pass a string array like

<div data-sly-resource="${myModel.aStringArray @ resourceType='my/component' }"></div>

But like mentioned above this seems to be meant for passing nodes only.

Is there any way to accomplish passing data directly to a component (other than creating a template)?

2
aemaem-6
You can either extend the SlingModel to get data from basically anywhere (the request, the resource, remote services) or you could add another Model that you include in your HTL file. I am not sure if I see the problem here..? - Oliver Gebert

2 Answers

1
votes

You can pass additional information in the form of request attributes or selectors

Selectors

Selectors are the most straight forward of passing simple information. This is an array of strings that can be passed. This is quite useful to data that can act as flags ex:

  • Variant/Mode of the component
  • index of the component in a list if it is being included in a loop.
  • ID of the parent when building things like accordion, tabs

This approach is an abuse of selectors, but IMHO as long as you know what you are doing this shouldn't be a major concern.

<article data-sly-resource="${'path/to/resource' @ selectors=['s1', 's2']}"></article>

You can add, replace or remove selectors while including the component. Checkout the documentation for the syntax. https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html#resource

Request Attributes

This option allows you to add custom request attributes to the component request. This can be used to pass objects as parameters to the component while including them.

These are standard http request attributes with convince of scoping them to a particular instance of script/resource inclusion. To use this you will end up needing a model class or use-js as there is little support to compose the data to be passed along in sightly.

<sly data-sly-use.settings="com.adobe.examples.htl.core.hashmap.Settings" 
        data-sly-include="${ 'productdetails.html' @ requestAttributes=settings.settings}" />

https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html#request-attributes

2
votes

There is another way. You can pass additional parameters to the Sling Model on initialization using data-sly-use. For example:

<div data-sly-use.model="${'com.model.Teaser' @ test='abc'}"

You can read then the variable "test" in model from request:

@PostConstruct
private void initModel() {
    String value = request.getAttribute("test");
    // value is 'abc'
}

In order this to work correctly you need to make sure your Sling Model is adaptable from request @Model(adaptables = SlingHttpServletRequest.class}