With HTL, Pass Data from AEM Backend to Javascript

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:

  1. 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.
  2. The attribute value can be any string.

An example of an plain <section> HTML element storing multiple data attributes of values, for the use of your JavaScript logic:

1
2
3
4
5
<section
 id="tax-calculator"
 data-year="2020"
 data-tax-code="3"
 data-calender-end-point="https://ms.sourcedcode.com/taxcalculator"></section>

A HTL implementation:

1
2
3
4
5
<section data-sly-use.taxcal="com.sourcedcode.core.components.models.TaxCalculator"
  id="tax-calculator"
  data-year="${taxcal.year @ context='scriptString'}"
  data-tax-code="${taxcal.taxCode @ context='scriptString'}"
  data-calender-end-point="${taxcal.endPoint @ context='scriptString'}"></section>

Sling Model implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package com.sourcedcode.core.components.models;

import com.adobe.cq.export.json.ExporterConstants;
import lombok.Getter;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Exporter;
import org.apache.sling.models.annotations.Model;

@Model(adaptables = { Resource.class },
    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME,
    extensions = ExporterConstants.SLING_MODEL_EXTENSION)
public class TaxCalculator {
    @Getter
    private int year = 2020;

    @Getter
    private int taxCode = 3;

    @Getter
    private String endPoint = "https://ms.sourcedcode.com/taxcalculator";
}

2. Accessing the Data Attributes with JavaScript

Retrieving the value(s) of the HTML data attribute(s) in JavaScript is straight forward. You could use getAttribute() with their full HTML name to read these values, but the standard defines a better: a DOMStringMap you can read out via a dataset property.

To retrieve the data attribute(s) through the dataset object, retrieve the property by the part of the attribute name after data- (note that dashes are converted to camelCase).

Example:

1
2
3
4
5
const article = document.querySelector('#tax-calculator');
 
article.dataset.year // "2020"
article.dataset.taxCode // "3"
article.dataset.calenderEndPoint // "https://ms.sourcedcode.com/taxcalculator"




Was this post helpful?

Certified AEM Developer who has been working on AEM software developer for the past 5 years.

5 thoughts on “With HTL, Pass Data from AEM Backend to Javascript

  1. Great article! From the example above, you can also get the data attribute using JQuery:
    $( “tax-calculator” ).data(“year”);

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top