Link transformer for data- attribute

Question

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

BrianKasingli · Accepted Answer

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

sarav_prakash · Answer

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded