With HTL, Pass Data from AEM Backend to Javascript | AEM Community Blog Seeding

[kautuk_sahni]

With HTL, Pass Data from AEM Backend to Javascript by Sourced Code

Abstract

When working with AEM components, it’s very common to pass data from AEM backend to a particular JavaScript event. In this article, we will be focusing on how to pass data from AEM backend using the HTML data-* attribute.

HTML data attributes were designed apart of HTML5 where these attributes allow developers to store data, as a string, on HTML elements. With HTL, we can set a value within data attribute’s value, returned from the AEM backend via Sling Model or HTL Java Use-API or HTL JavaScript Use-API.

The data attribute’s value set will be data from the AEM backend using the HTL scripting engine and will be apart of the HTML server-side render output. Next, JavaScript will be used to access these values.

1. HTML Data Attribute Syntax
The data attribute is made up of two parts:

The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix “data-“, example: data-year, data-tax-code, data-calendar-point.
The attribute value can be any string.
An example of an plain

HTML element storing multiple data attributes of values, for the use of your JavaScript logic:

A HTL implementation:

Read Full Blog

With HTL, Pass Data from AEM Backend to Javascript

Q&A

Please use this thread to ask the related questions.