How to Retrieve AEM Component Property Value in JavaScript | Adobe Higher Education
Skip to main content
R
Rishabh17
November 25, 2023
Risolto

How to Retrieve AEM Component Property Value in JavaScript

  • November 25, 2023
  • 2 risposte
  • 3413 visualizzazioni

 

Hello AEM Community,

 

I'm facing a challenge with retrieving a component property value in JavaScript.

 

Specifically, I have a component named "userdetails" that includes a text field labeled "first name." The corresponding property for this field is stored as "fName." My objective is to access the value of this property ("fName") in JavaScript.

 

Could someone kindly assist me with the correct approach or code snippet to achieve this? Any guidance or insights from the community would be greatly appreciated.

 

Thank you in advance for your support.

 

@arunpatidar@rezwanur @aanchal-sikka @parthasarathy @_manoj_kumar_  @satheeskannak 

@saravanan_dharmaraj  @markusbullaadobe 

 

 

```

Questo argomento è stato chiuso alle risposte.
Migliore risposta di Rezwanur

Hi @rishabh17, You can use the "data-" attribute of HTML to set the property value against a key in HTL and retrieve it in Javascript.

HTL:

<div id="example-id" data-fname="${properties.fName}">

 

Clientlib JS:

$(document).ready(function () {
    const element = document.querySelector("#example-id");
    let firstName = element.dataset.fname;
}


Hope it helps. 

2 risposte

Rezwanur
RezwanurRisposta
Level 2
November 25, 2023

Hi @rishabh17, You can use the "data-" attribute of HTML to set the property value against a key in HTL and retrieve it in Javascript.

HTL:

<div id="example-id" data-fname="${properties.fName}">

 

Clientlib JS:

$(document).ready(function () {
    const element = document.querySelector("#example-id");
    let firstName = element.dataset.fname;
}


Hope it helps. 

    vineel_k
    vineel_k
    Level 2
    November 25, 2023

    Hi @rishabh17  follow the below steps

    As you mentioned below is the Component node structure



    get the property value "fName" using JavaScript Use API

    script.js :

     

     

    "use scrict" use (function() { var fName = granite.resource.properties["fName"]; return { fName:fName }; });

     

     

     userdetails.html :

     

     

    <div data-sly-use.model="script.js"> <h2> Name : <p1>${model.fName}</p1></h2> </div>

     

     


    Dialog structure:

     Content rendering on Page:

     

    Thanks,
    vineel_k.

    Termini e CondizioniAccessibility statement

    Loading footer...