Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

Button Core Component - Adding custom HTML attributes and HTML Tags via Sling Delegation Pattern

Avatar

Level 1

I am trying to use Button Core Component. As per our project requirements we need to add some custom attributes to anchor tags and to add some html tags(span tag) with minimal code changes.

I was trying to leverage the "data-sly-attribute="${button.buttonLink.htmlAttributes}" line in v2 Button but this doesn't work as finally in the LinkImpl it filters the attributes with the values in below set.

private static final Set<String> ALLOWED_ATTRIBUTES = new HashSet<String>() {{
add(ATTR_TARGET);
add(ATTR_ARIA_LABEL);
add(ATTR_TITLE);
}};

 

Is there a way I can achieve this without having to overlay the Button HTML. Also I need to have a global solutions as this would be used for all links in core components.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Id suggest keeping the custom implementation code closer to your own sling model. So try not extend the core component Button code, but to expose something like getButtonAllowedAttributes(), which in your Sightly code, you can just call ${model.buttonAllowedAttributes}. Keeping it simple.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Id suggest keeping the custom implementation code closer to your own sling model. So try not extend the core component Button code, but to expose something like getButtonAllowedAttributes(), which in your Sightly code, you can just call ${model.buttonAllowedAttributes}. Keeping it simple.