Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to pass some HTL variables/objects to a clientlib JS?

Avatar

Level 8

maybe easier to explain with an example:

<sly data-sly-use.mypageVars="${'com.myhost.core.impl.view.page.MyPageHelper'}"></sly>
<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-call="${clientLib.all @ categories='myhost.components.mypage'}"></sly>

I want to pass the data stored insite "mypageVars" to the javascript that's included in my clientlib "myhost.components.mypage"

Can you please tell me how it's done?

Thanks

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hello @jayv25585659 ,

 

Please see @Ritesh_Mittal answer and another way is. you can write this way in your HTL file,  declare javascript and assign the objects. and these variabels available to access in the clientlib.

<sly data-sly-use.mypageVars="${'com.myhost.core.impl.view.page.MyPageHelper'}">
</sly>

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-call="${clientLib.all @ categories='myhost.components.mypage'}">
</sly>

<script>

var mypageVars = "${mypageVars}";

<script>

 

mypageVars object is available in the javascript code.

 

Thanks,

Venkat

View solution in original post

3 Replies

Avatar

Community Advisor

Hi @jayv25585659 ,

 

You can simply give id to your DIV/SLY element and can use jQuery selector to grab the value

 

 

<sly data-sly-use.mypageVars="${'com.myhost.core.impl.view.page.MyPageHelper'}" id="myVarId">
</sly>

 

Inside Clientlib-

 

$( document ).ready(function() {
var myVarValue = $("#myVarId").val();
});

 

The Clientlib should be included on the HTL .

Avatar

Correct answer by
Level 4

Hello @jayv25585659 ,

 

Please see @Ritesh_Mittal answer and another way is. you can write this way in your HTL file,  declare javascript and assign the objects. and these variabels available to access in the clientlib.

<sly data-sly-use.mypageVars="${'com.myhost.core.impl.view.page.MyPageHelper'}">
</sly>

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-call="${clientLib.all @ categories='myhost.components.mypage'}">
</sly>

<script>

var mypageVars = "${mypageVars}";

<script>

 

mypageVars object is available in the javascript code.

 

Thanks,

Venkat