Button Core Component - Adding custom HTML attributes and HTML Tags via Sling Delegation Pattern | Community
Skip to main content
A
abhishektiwari
December 8, 2021
Solved

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

  • December 8, 2021
  • 1 reply
  • 875 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

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.

1 reply

BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
July 12, 2023

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.

    Terms & ConditionsAccessibility statement

    Loading footer...