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

Passing sightly property or variable inside js function

LaMind3
Level 2
Level 2

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?

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

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

 

View solution in original post

4 Replies
Manjunath_K
Community Advisor
Community Advisor

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

BrianKasingli
Correct answer by
Community Advisor
Community Advisor

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

 

View solution in original post

LaMind3
Level 2
Level 2

I added 'scriptString' context and it worked fine.

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

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

 

Thanks for guiding me.

Nikhil-Kumar
Community Advisor
Community Advisor

@LaMind3 

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