How to pass javascript value in sightly use object? | Community
Skip to main content
New Participant
Sep 20, 2017 11:14 PM UTC
Solved

How to pass javascript value in sightly use object?

Is there any way to pass value in sightly template from javascript

e.g.
template.jade

div(data-sly-use.testArray="${\'com.test.Service\'}" data-sly-unwrap)

div(data-sly-use.testArray="${\'com.test.Service\' @ year='2017'}" data-sly-unwrap)

div(data-sly-use.testArray="${\'com.test.Service\' @ exam='java'}"

render html file

I have to render below template based on page url condition

Case 1: IF page url doesn't have any value

e.g. pageurl = http://www.google.com/mypage.html

<div data-sly-use.vs="${'com.test.Service'}" data-sly-unwrap="data-sly-unwrap"></div>

<ol data-sly-list.item="${vs.allMakes}">

    <li data-sly-text="${item}"></li>

</ol>

Case 2: IF page url have year & value

e.g. pageurl = http://www.google.com/mypage.html/year/2017

year

<div data-sly-use.vs="${'com.test.Service' @ year='2017'}" data-sly-unwrap="data-sly-unwrap"></div>

<ol data-sly-list.item="${vs.testForYear}">

    <li data-sly-text="${item}"></li>

</ol>

Case 3: IF page url have exam & value

e.g. pageurl = http://www.google.com/mypage.html/exam/java

<div data-sly-use.vs="${'com.test.Service' @ exam='java'}" data-sly-unwrap="data-sly-unwrap"></div>

<ol data-sly-list.item="${vs.testForExam}">

    <li data-sly-text="${item}"></li>

</ol>

Case 4: there may be case when exam value should not be there

e.g. page url is like http://www.google.com/mypage.html/exam/

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Feike_Visser1
Feike_Visser1Accepted solution
Employee
Sep 21, 2017 10:35 AM UTC

Remember that HTL/Sightly is fully serverside.

2 replies

Feike_Visser1
Feike_Visser1Accepted solution
Employee
Sep 21, 2017 10:35 AM UTC

Remember that HTL/Sightly is fully serverside.

Translate
smacdonald2008
Level 10
Sep 21, 2017 12:13 AM UTC

I recommend using Java - either WCMUsePojo or Sling Modles - over JS API for use with HTL:

We have a lot of HTL articles that show use of WCMUsePojo and Sling Models. Here are a few...

  1. Getting Started WCMUsePojo -- Scott's Digital Community: Creating an AEM HTML Template Language component that uses the WCMUsePojo class
  2. More advanced WCMUsePojo - Scott's Digital Community: Creating an Adobe Experience Manager Newsletter HTL component
  3. HTL and Sling Model -- Scott's Digital Community: Creating a custom Touch UI Grid Component for Adobe Experience Manager
  4. How to handle a collection with HTL and WCMUsePojo - Scott's Digital Community: Creating an Adobe Experience Manager HTL component that displays a repeating data set
  5. How to invoke a Restful Service and display in HTL -- Scott's Digital Community: Creating an AEM HTML Template Language Component that displays data from a Restful Web Servic…
  6. How to build a custom HTL Image/Text component that shows use of IF statements in HTL -- Scott's Digital Community: Creating a custom Image Text component for Experience Manager 6.3

Here are some community articles that show HTL and JS API:

1. http://aempodcast.com/2015/javascript/understanding-javascript-use-api-aem/#.WcMC1siGOF4

2. Adding JavaScript Functions for Sightly to Use

3. Guide for working with Templates and Call in Sightly AEM 6.1 | Adobe AEM Club

Hope this helps...

Translate