Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,128 likes

Total Posts

6,133 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,128 likes

Total Posts

6,133 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

25-09-2020

BlogImage.jpg

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.

AEM AEMEBlogSeeding Experience Manager