Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

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

ShagunMalik
Level 3
Level 3

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

Can I use $properties.title?

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

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

 

 

View solution in original post

3 Replies
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

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

 

 

View solution in original post

asutosh_jena
Community Advisor
Community Advisor

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!

Arun_Patidar
Community Advisor
Community Advisor

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