Hello,
We are starting to create Adobe Components. We are in a big company and we're trying to translate web-components into AEM.
So for example, on authoring mode, we're binding attributes instead of styles in our component's modal.
Is there a way to create a data-set or a system to get those attributes easily instead of redefining them each time ?
Thanks for your help.
Hi @marjorielazaro,
I'm not sure I've understood exactly what you're looking for... but if you mean "How can I easily pass a number of attributes to a web-component element in HTL" then the asnwer is to use a Map and the data-sly-attribute expression.
Here is an example:
Interface:
public interface DemoModel {
Map<String, String> getAttributes();
}Model:
@Model(
adaptables = Resource.class,
adapters = DemoModel.class,
resourceType = "demo/components/content/demo"
)
public class DemoModelImpl implements DemoModel {
@Getter
private Map<String, String> attributes;
@PostConstruct
public void init() {
attributes = new HashMap<>();
attributes.put("href", "https://www.google.com");
attributes.put("target", "_blank");
}
}HTL:
<div data-sly-use.model="com.theopendle.core.models.DemoModel">
<a data-sly-attribute="${model.attributes}">Demo component</a>
</div>Result:
You can read the documentation in more detail here: https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html#attribute
Hi @marjorielazaro,
I'm not sure I've understood exactly what you're looking for... but if you mean "How can I easily pass a number of attributes to a web-component element in HTL" then the asnwer is to use a Map and the data-sly-attribute expression.
Here is an example:
Interface:
public interface DemoModel {
Map<String, String> getAttributes();
}Model:
@Model(
adaptables = Resource.class,
adapters = DemoModel.class,
resourceType = "demo/components/content/demo"
)
public class DemoModelImpl implements DemoModel {
@Getter
private Map<String, String> attributes;
@PostConstruct
public void init() {
attributes = new HashMap<>();
attributes.put("href", "https://www.google.com");
attributes.put("target", "_blank");
}
}HTL:
<div data-sly-use.model="com.theopendle.core.models.DemoModel">
<a data-sly-attribute="${model.attributes}">Demo component</a>
</div>Result:
You can read the documentation in more detail here: https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html#attribute
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.