How to access dialog box value of text format in javascript.

[#1]

How to access dialog box value of text format in javascript.

Can I use $properties.title?

[#2 · Accepted solution]

@ShagunMalik, 

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"

[#3]

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

[#4]

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!