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="/content/project/site/en/about.html">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
AEM 6.5.17
Solved! Go to Solution.
Views
Replies
Total Likes
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="/content/project/site/en/about.html">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
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.
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="/content/project/site/en/about.html">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
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.
Views
Likes
Replies
Views
Likes
Replies