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

Avatar

Avatar
Validate 25
Level 4
jayv25585659
Level 4

Likes

46 likes

Total Posts

131 posts

Correct reply

0 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 5
View profile

Avatar
Validate 25
Level 4
jayv25585659
Level 4

Likes

46 likes

Total Posts

131 posts

Correct reply

0 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 5
View profile
jayv25585659
Level 4

24-06-2021

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 5
Level 3
vmadala
Level 3

Likes

21 likes

Total Posts

28 posts

Correct reply

5 solutions
Top badges earned
Boost 5
Establish
Boost 3
Boost 1
Affirm 1
View profile

Avatar
Boost 5
Level 3
vmadala
Level 3

Likes

21 likes

Total Posts

28 posts

Correct reply

5 solutions
Top badges earned
Boost 5
Establish
Boost 3
Boost 1
Affirm 1
View profile
vmadala
Level 3

24-06-2021

Hello @jayv25585659 ,

 

Please see @Ritesh_M 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

Answers (2)

Answers (2)

Avatar

Avatar
Boost 5
Level 7
Ritesh_M
Level 7

Likes

179 likes

Total Posts

142 posts

Correct reply

44 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Boost 5
Level 7
Ritesh_M
Level 7

Likes

179 likes

Total Posts

142 posts

Correct reply

44 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile
Ritesh_M
Level 7

24-06-2021

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

Avatar
Affirm 25
Level 5
Bimmi_Soi
Level 5

Likes

73 likes

Total Posts

81 posts

Correct reply

26 solutions
Top badges earned
Affirm 25
Contributor
Applaud 5
Boost 50
Ignite 1
View profile

Avatar
Affirm 25
Level 5
Bimmi_Soi
Level 5

Likes

73 likes

Total Posts

81 posts

Correct reply

26 solutions
Top badges earned
Affirm 25
Contributor
Applaud 5
Boost 50
Ignite 1
View profile
Bimmi_Soi
Level 5

24-06-2021

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 - ...