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

[jayv25585659]

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

[Ritesh_Mittal]

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 .

[Bimmi_Soi]

Hi @jayv25585659 

Pass it as data attribute from your html and then getAttribute in your js

or check 

Solved: AEM 6.x: How to pass an HTL variable to clientlib/... - Adobe Experience League Community - ...

[vmadala · Accepted solution]

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