Adding Custom Attribute to Clientlibs Through Sling Transformers

What are Sling Transformers?

Sling Transformers are basically OSGi services used within the Sling Rewriter framework to modify or transform the content of HTML or XML before it is rendered or delivered to the client. They are powerful when we need to manipulate the output content without modifying the original content structure.

Key concepts of Sling Transformers

• Sling Rewriter Pipeline: A Sling Transformer is a part of the sling rewriter pipeline, which processes the content of the requested resource. The pipeline consists of a series of components, such as Generators, Transformers, and Serializers.
  • Generators: Generators generate the initial content (usually HTML or XML).
  • Transformers: Transformers modify the content in various ways (e.g., adding attributes, filtering content).
  • Serializers: These output the transformed content (usually back to HTML or XML).

Adding custom attributes to client-libs through Sling Transformers:

While including the client libraries, we can include certain attributes as well if there is a requirement.
These attributes are:

• async = true | false
• crossorigin = anonymous | use-credentials
• defer = true | false
• integrity = {string}
• nomodule = true | false
  <sly data-sly-use.clientlib=”/apps/wcm-io/wcm/ui/clientlibs/sightly/templates/clientlib.html” data-sly-call=”${clientlib.js @ categories=[‘my-clientlib-category’],async=true,type=’module’}”/>
  But what if we have to add any custom attributes while calling the client-libraries like data attributes?

Common use cases

• Adding or modifying HTML attributes (e.g., adding a data attribute).
• Changing content dynamically based on certain conditions (e.g., locale-based content modification).
• Injecting analytics tags, scripts, or other metadata into HTML.
• Content sanitization (e.g., removing unwanted elements).

Problem statement

We have a use case where we have to add a custom attribute(data-cookie consent) for all the client libraries.

Solution:

• Since only a certain set of attributes are allowed by default, which we can add directly, therefore to add data-cookieconsent, we have used Sling Transformer.
• We have created a Transformer which basically implements the Transformer and TransformerFactory interface.
• We have to define pipeline type as well which is basically used to uniquely identify the transformer that get referenced by pipeline configuration.
• Transformer implementation provides a certain method that helps us to modify the HTML before rendering it to the client without making any changes to the actual markup.
• We have to configure an HTML rewriter pipeline as well.

Steps:

• Creating custom transformer: A custom transformer needs to be created implementing TransformerFactory. We have to define the pipeline. type as well which gets used inside the HTML rewriter pipeline.
  

  Transformer

• Implementing TransformerFactory methods: We will get multiple methods from TransformerFactory. Out of that, We have to write the transformation logic inside the startElement method. In this method, We are using ContentHandler to modify the attributes.
  

  Overriding Method

• Creating HTML rewriter pipeline: We have already defined the pipeline. type. Now we need to configure the HTML Rewriter Pipeline where we have to specify the transformer types same as that of the pipeline. type along with generator type and order. These configurations get stored inside /apps/<Project-name>/config/rewriter.
  

  HTML Rewriter Pipeline

  Finally, we need to check whether our configuration is registered by checking the AEM Sling Rewriter system console using the path “domain/system/console/status-slingrewriter”

Output:

Final Output

Conclusion

We can add attributes while calling client-libraries but the list of these attributes is limited. Therefore If we want to add any custom attribute to client libraries then we can use the Sling Transformers which will help us to modify the HTML before delivering it to the client.

References

https://sling.apache.org/documentation/bundles/output-rewriting-pipelines-org-apache-sling-rewriter.html
https://wcm.io/wcm/ui/clientlibs/usage.html