Passing sightly property or variable inside js function | Community
Skip to main content
L
LaMind3
New Participant
October 5, 2020
Solved

Passing sightly property or variable inside js function

  • October 5, 2020
  • 4 replies
  • 6166 views

I am trying to pass slightly property - ${tabs.id} to openSection() as shown below.

<button class="tablinks" onclick="openSection(event, ${tabs.id}-section)">${tabs.tabname}</button>

But I see - onclick="openSection(event, -section)" in html when component is rendered.

 

whereas below expression works.

<div id="${tabs.id}-section" class="section">

html output:  

<div id="first-section" class="section">

 

How can pass this property to openSection() to make this work?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

When passing data to HTML or JavaScript, You are missing the display context option, @context, mentioned by @lamind3  try using "text", or "scriptString". If none of those work, have a look at the HTL documentation for other context options.

 

< button class ="tablinks" onclick="openSection(event, ${tabs.id @context = 'scriptString'}-section)" > ${tabs.tabname} </button >

Also, take a look at this blog article, as it explains, With HTL, How to Pass Data from AEM Backend to Javascript - https://sourcedcode.com/blog/aem/with-htl-pass-data-from-aem-backend-to-javascript

 

4 replies

Nikhil-Kumar
Nikhil-Kumar
New Participant
October 5, 2020

@lamind3 

Try using @content along with the sightly prop that you are fetching and displaying. 

    L
    LaMind3Author
    New Participant
    October 5, 2020

    I added 'scriptString' context and it worked fine.

    < button class ="tablinks" onclick="openSection(event, ${tabs.id @2941342 = 'scriptString'}-section)" >

    When I add @2941342 = 'text' , it prints html on page.

     

    Thanks for guiding me.

      BrianKasingli
      BrianKasingliAccepted solution
      New Participant
      October 5, 2020

      When passing data to HTML or JavaScript, You are missing the display context option, @context, mentioned by @lamind3  try using "text", or "scriptString". If none of those work, have a look at the HTL documentation for other context options.

       

      < button class ="tablinks" onclick="openSection(event, ${tabs.id @context = 'scriptString'}-section)" > ${tabs.tabname} </button >

      Also, take a look at this blog article, as it explains, With HTL, How to Pass Data from AEM Backend to Javascript - https://sourcedcode.com/blog/aem/with-htl-pass-data-from-aem-backend-to-javascript

       

        Manjunath_K
        Manjunath_K
        New Participant
        October 5, 2020

        Hi @lamind3 

        Add @context as mentioned below & it will work as expected.

         

         

        < button class ="tablinks" onclick ="openSection(event, ${tabs.id @context = 'text'}-section)" > ${tabs.tabname} </ button >

         

        -Manjunath

          Terms & ConditionsAccessibility statement

          Loading footer...