Converting JSTL core tags into Sightly

[lisa_burrow]

Hi,

I am very new to sightly and I need to convert the following code into Sightly.

<c:when test="${not empty properties.leftURL}">        --leftURL isn't a checkbox it is a field and I am checking that it has a URL in it
  <c:choose>
  <c:when test="${fn:startsWith(properties.leftURL, '/content')==true}">      --checking if it an internal or external URL
      <a href="${properties.leftURL}.html" target="_parent"><img src="<%= leftImage %>" alt="image"></a>
  </c:when>
  <c:otherwise>
      <a href="${properties.leftURL}" target="_parent"><img src="<%= leftImage %>" alt="image"></a>
  </c:otherwise>
  </c:choose>
</c:when>

Is there anyone who could help or give me advice me please?

I have spent a lot of time researching on the internet but can't find an example to use that can help me.

Thanks

Lisa.

[Ritesh_Mittal]

Hi @lisa_burrow ,

To convert this code to HTL/Sightly, first you need to understand various blocks available and their usages in HTL.

We can separate presentation and business logic using HTL and Sling Model combination.

Now let's understand this code snippet, eventually what you want to achieve is to have an anchor tag. In one case appending html extension, whereas in another case without extension. So what we can do is to move the business logic to backend (Sling Model) and on HTL you can just add anchor tag.

(Note - below code is not optimized, it is just for reference-)

Sling Model -

public boolean getLeftURL() {
if(leftURL.startsWith("/content")){
return leftURL + ".html";
}else{
return leftURL;
}
return leftURL.startsWith("/content");
}

HTL

<a href="${model.leftURL}" target="_parent"><img src="<%= model.leftImage %>" alt="image"></a>

I have explained HTL/Sling Model in below videos-

https://www.youtube.com/watch?v=LhvSNVagoZk

https://www.youtube.com/watch?v=Wq93eTSdoC8

https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/block-statements.html?lang=...

[lisa_burrow]

Thank you for you help and advice, I will take a look at the videos and documents.

[BrianKasingli · Accepted solution]

@lisa_burrow,

When you are converting JSP Components to Sightly Components, you will discover that the JSP script has coupled view and backend logic. One of the ways that you can determine backend code when the JSP code calling a function with params, for example, "${fn:startsWith(properties.leftURL, '/content')==true}; keeping in mind, the JSP blocks of code with some computation logic, you can place this into the Sling Model backend.

TheView logic contains your HTML and <c:choose> block elements as such; which can be written in Sightly HTL. I work most efficiently with the Sightly documentation opened, https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md

Specifically, you are asking to convert JSTL to Sling Model, AEM global objects are available to Sling Models and Sightly, the AEM global objects should have most of the AEM’s core JSTL functionalities. Knowing the AEM global objects, you can swiftly convert JSPs to Sling Model and Sightlly, of course with API constraints, you will need to write your own logic. 

There is one blog article example here I made where it explains how JSP that is using the "sling" JSTL can be converted to Sightly and Sling Model, https://sourcedcode.com/blog/aem/taglib-prefix-sling-to-sightly-and-sling-model-non-jsp-non-jstl-imp...; however, this blog article is very specific for only the "sling" JSTL.

I hope this helps,
Brian.

[lisa_burrow]

Thank you for you help and advice, I will take a look at the documents.