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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 7

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