Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Link transformer for data- attribute

Avatar

Level 3

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

3 Replies

Avatar

Level 4

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. 

Avatar

Correct answer by
Community Advisor

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

Avatar

Level 3

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.