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

Avatar

Avatar

ShagunMalik

Avatar

ShagunMalik

ShagunMalik

08-04-2021

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

Can I use $properties.title?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

08-04-2021

@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"

 

 

Answers (2)

Answers (2)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883
Arun_Patidar
MVP

08-04-2021

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

Avatar

Avatar

asutosh_jena

Avatar

asutosh_jena

asutosh_jena

08-04-2021

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!