Link transformer for data- attribute

[ClintLundmark]

We have an already-built component that utilizes a third party JavaScript API. There is a textfield property entered by a content author that is ultimately read by the JavaScript API to display a message. The property is stored in a data-* attribute in the HTML.

We want to change the textfield to a richtext so rich text features can be enabled, like bold, italic, and creating a link. The data-* attribute supports containing html. The problem is an <a href> tag/attribute in the HTML that is contained within the data-* attribute does not get transformed via Link Checker Transformer because it is quoted HTML in an attribute rather than real HTML. 

HTML Example:

<option value="message" data-alert="<p>Message here with a <a href=&quot;/content/project/site/en/about.html&quot;>link</a> to an internal page.</p>" hidden="true">alert</option>

I am not sure how to tell the link transformer to process that HTML as HTML, finding the <a href> tag/attribute and translating the link per etc/map configuration.

Possible solutions

• In JavaScript I could write code to search and replace portions of the link using the same rules that are in etc/map, but that seems redundant.  IE search for "/content/project/site/en/" and replace with "/" making a relative link of /about.html.
• A model could be written to do the same thing, but again redundant.
• Ideally, there is away to send that AEM property through the link transformer immediately as it is written into the HTML. I am not sure how to do that. 
• Maybe there is a better solution?

AEM 6.5.17

[sarav_prakash]

You are looking for writing a Custom Link Transformer in AEM.

This article looks exhaustive https://wttech.blog/blog/2019/how-to-use-sling-transformers-in-aem/

writing js code is clientside transformation, AFTER the page renders on browser, they get transformed. It may result in slight flicker or bad for SEO. 

A custom transform, happens server-side. AEM reads the final document and sends into transformer. Conditionally we transform matching DOM elements. In yourcase you match with your custom data attribute, transform as required and dispatch. 

[BrianKasingli · Accepted solution]

How you can resolve this is by passing the string to a backend Sling Model Utils Class. like:

<option value="message" data-sly-use.stringHelper="${'com.sourcedcode.core.utils.use.stringHelper' @ string='<p>Message here with a <a href=&quot;/content/project/site/en/about.html&quot;>link</a> to an internal page.</p>'}"
data-alert="${stringHelper.formattedString}" hidden="true">alert</option>

You can find tutorial and implementation examples here How to Pass Data Parameters to Sling Modal from Sightly HTL Component - Sourced Code

For converting long url to short url, you can use the resolver.map API: ResourceResolver (The Adobe AEM Quickstart and Web Application.)

try (ResourceResolver resourceResolver = resourceResolverFactory.getServiceResourceResolver(null)) {
     String mappedPath = resourceResolver.map(path);
     LOG.info("Mapped path: {}", mappedPath);
     return mappedPath;
     } catch (Exception e) {
          LOG.error("Error mapping path", e);
}

 
but in order for this to work, you need to have etc.maps setup or the resource resolver mapping OSGI configs, Apache Sling :: Mappings for Resource Resolution

[ClintLundmark]

Thanks @BrianKasingli and @sarav_prakash for the responses. I had a priority change and have not gotten back to this. I am hopeful that the solution has been provided, but unfortunately have not had a chance to try it yet.