Solved
How to access dialog box value of text format in javascript.
How to access dialog box value of text format in javascript.
Can I use $properties.title?
Community Advisor and Adobe Champion
April 8, 2021
There are many different ways to achieve this, but I will give you two options. (https://sourcedcode.com/blog/aem/with-htl-pass-data-from-aem-backend-to-javascript)
1. Using HTL
// HTL
<section
id="tax-calculator"
data-year="${properties.year @ context='scriptString'}"
data-tax-code="${properties.taxCode @ context='scriptString'}"
data-calender-end-point="${properties.endPoint @ context='scriptString'}"></section>
// JavaScript
const article = document.querySelector('#tax-calculator');
article.dataset.year // "2020"
article.dataset.taxCode // "3"
article.dataset.calenderEndPoint // "https://ms.mysite.com/taxcalculator"
2. Using Sling Models and HTL
// JAVA
@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.mysite.com/taxcalculator";
}
// HTL
<section data-sly-use.taxCalc="com.mysite.core.components.models.TaxCalculator"
id="#tax-calculator"
data-year="${taxCalc.year @ context='scriptString'}"
data-tax-code="${taxCalc.taxCode @ context='scriptString'}"
data-calender-end-point="${taxCalc.endPoint @ context='scriptString'}"></section>
// JavaScript
const article = document.querySelector('#tax-calculator');
article.dataset.year // "2020"
article.dataset.taxCode // "3"
article.dataset.calenderEndPoint // "https://ms.mysite.com/taxcalculator"
