How to access dialog box value of text format in javascript.
Can I use $properties.title?
Solved! Go to Solution.
Views
Replies
Total Likes
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"
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"
Hi @ShagunMalik
You can read the dialog value and put on HTL as a hidden attribute and read using Javascript.
HTL:
<div class="something" id="something">${properties.title}</div>
Js:
$("#something").text();
Thanks!
Hi,
you need to write a clientlibs of category cq.dialog.authoring
and access textfield text on one of the following event based on your use case.
https://github.com/arunpatidar02/aem63app-repo/blob/master/js/listener.js
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies