onload attributes on your
script elements. Likewise, while managing your cross-origin resource sharing (CORS) HTTP requests, you may want to utilize the
crossorigin attribute on your
When we follow the data-sly-use block's expression value in our AEM instance, we find three files that work together with the
to provide the final clientlib output.
contains named Sightly template blocks (
), which in turn set the proper Sightly expression option for mode and call the named Sightly templates in
then sets the proper Sightly expression options and delegates the more complex logic to a Java-Use API POJO.
then utilizes the
in order to write out the final HTML markup.
All files associated with Sightly clientlibs are viewable in your AEM instance under the
/libs/granite/sightly/templates node. To make any alterations, we simply copy all three files out of
/apps, update the files, and update our Sightly components to point to the new clientlib component (usually
headlibs.html or similar partial in the page component).
In our case, we want to alter the HTML markup by adding additional attributes to the script and link elements. In order to do that, we first add additional Sightly expression options to all the Sightly templates. In this example, I'm using
Once the new Sightly expression options are set, the Java-Use POJO is updated to obtain those options from the provided bindings. AEM hands the responsibility of printing the final HTML markup to the
writeJsInclude methods. However, since we want custom markup, we need to do that ourselves in the POJO.
I've written a demonstration AEM project as well provided the code which can easily be installed into a single folder for use in your project. There is also an AEM package available for easy install. View the
AEM Clientlib Async
project on GitHub.