How to access dialog box value of text format in javascript. | Community
Skip to main content
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
BrianKasingli
BrianKasingliAccepted solution
New Participant
Apr 8, 2021 2:42 PM UTC

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

3 replies

arunpatidar
arunpatidar
New Participant
Apr 8, 2021 8:01 PM UTC

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

Translate
Arun Patidar
    Asutosh_Jena_
    Asutosh_Jena_
    New Participant
    Apr 8, 2021 2:46 PM UTC

    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!

    Translate
      BrianKasingli
      BrianKasingliAccepted solution
      New Participant
      Apr 8, 2021 2:42 PM UTC

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

       

       

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...