How to pass some HTL variables/objects to a clientlib JS? | Community
Skip to main content
jayv25585659
jayv25585659
Level 8
June 24, 2021
Solved

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

  • June 24, 2021
  • 3 replies
  • 2178 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by vmadala

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

3 replies

Ritesh_Mittal
Community Advisor and Adobe Champion
Ritesh_MittalCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
June 24, 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 .

    B
    Adobe Employee
    BimmiSoAdobe Employee
    Adobe Employee
    June 24, 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 - 239717

      vmadala
      vmadalaAccepted solution
      Level 3
      June 24, 2021

      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

        Terms & ConditionsAccessibility statement

        Loading footer...