AEM component - attributes and styles

Avatar

Avatar
Boost 1
Level 1
marjorielazaro
Level 1

Like

1 like

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
marjorielazaro
Level 1

Like

1 like

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile
marjorielazaro
Level 1

21-08-2020

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.
 

View Entire Topic

Avatar

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
Theo_Pendle
MVP

22-08-2020

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:

Theo_Pendle_0-1598101484165.png

You can read the documentation in more detail here: https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html#attrib...