AEM: How common component injected in multiple components can have dynamic value

Question

I have a common component which is injected in multiple components via data-sly-resource.

componentA

<div
  data-sly-resource="${ 'abc' @ resourceType = 'btplayer-cms/components/content/some-common-component' }">
</div>

componentB

<div
  data-sly-resource="${ 'xyz' @ resourceType = 'btplayer-cms/components/content/some-common-component' }">
</div>

In some-common-component.html a "class" need to be added to the div which will be dynamic and specific to the component it is injected from. For example, when this component is added in componentA the html wuld be: <div class="componenta-button"></div> and when added in componentB it would be <div class="componentb-button"></div>

How can I achieve this? How would I know who is injecting this component or it possible to send extra parameters from the parent component which I can access from some-common-component.html

Answer 1

For this use case it’s probably best to use HTL templates:

<sly data-sly-use.common="common.html" data-sly-call="${common.myTemplate @ buttonClass='myClassA'}"></sly>

Answer 2

You can make use of requestAttributes (refer here)

Component A (passing the value):

Sightly :

<sly data-sly-use.compA = "com.mysite.core.models.CompA"/>
<div
  data-sly-resource="${ 'abc' @ resourceType = 'btplayer-cms/components/content/some-common-component', requestAttributes = compA.attribute }">
</div>

Sling Model :

package com.realogy.sir.core.models;

import java.util.HashMap; import java.util.Map;

import javax.annotation.PostConstruct;

import org.apache.sling.api.SlingHttpServletRequest; import org.apache.sling.models.annotations.Model;

@Model(adaptables = SlingHttpServletRequest.class) public class CompA {

public Map<String, Object> attribute = new HashMap<>();

@PostConstruct
protected void init() {
    attribute.put("attributeVal", "componenta");
}

}

Component B (passing the value):

Sightly :

<sly data-sly-use.compB = "com.mysite.core.models.CompB"/>
<div
  data-sly-resource="${ 'xyz' @ resourceType = 'btplayer-cms/components/content/some-common-component', requestAttributes = compB.attribute }">
</div>

Sling Model :

package com.realogy.sir.core.models;

import java.util.HashMap; import java.util.Map;

import javax.annotation.PostConstruct;

import org.apache.sling.api.SlingHttpServletRequest; import org.apache.sling.models.annotations.Model;

@Model(adaptables = SlingHttpServletRequest.class) public class CompB {

public Map<String, Object> attribute = new HashMap<>();

@PostConstruct
protected void init() {
    attribute.put("attributeVal", "componentb");
}

}

Common Component (consuming the value):

Sightly :

<sly data-sly-use.commonComp= "com.mysite.core.models.CommonComp"/>
<div class="${[commonComp.attributeVal, 'button'] @ join='-'}"></div>

Sling Model:

package com.mysite.core.models;

import javax.inject.Inject;

import org.apache.sling.api.SlingHttpServletRequest; import org.apache.sling.models.annotations.Model;

@Model(adaptables = SlingHttpServletRequest.class) public class CommonComp {

@Inject @Optional @Default(values="component")
private String attributeVal;

public String getAttributeVal() {
    return attributeVal;
}

}