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

Avatar

Avatar
Validate 1
Level 1
ShagunMalik
Level 1

Like

1 like

Total Posts

55 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
Ignite 1
Give Back
View profile

Avatar
Validate 1
Level 1
ShagunMalik
Level 1

Like

1 like

Total Posts

55 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
Ignite 1
Give Back
View profile
ShagunMalik
Level 1

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
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
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
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,324 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,324 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile
asutosh_jena
Level 10

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!