Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Is it possible to use the sightly htl as a templating ?

Avatar

Level 2

I'm not sure if AEM can return HTML directly, like you could with Springboot and Thymeleaf, but I'd like to try using the HTMX return HTML philosophy with the AEM components to see if it speeds up the performance of certain components. It would be great to have a search result component that runs on the server side and sends the HTML result rather than the JSON result, utilizing the server side on the client side as well. This would eliminate the need for two separate locations to maintain templating—on the frontend using js and on the htl of the sling model.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 4

@ronak_mehta ,
Thanks, I understand your problem now better. There could be a way though not my favorite. 
1) Have your search servlet return the paths of the search result resources.
2) In the component corresponding to the search result resource, add a new html with a selector with HTL + Sling model code necessary to return the HTML that you like for the search result.
-cq:Component[name='mypage']
 -mypage.html
 -mypage.searchversion.html
3) In JS make a call to each of the paths with the above created selector
e.g: /content/mysite/page1withsearchterm.searchversion.html

You will have to make multiple calls, one for each search result item, though. This might still work with paginated results and dispatcher caching, wouldn't recommend it unless you want the HTML rendered only by the server. Just letting you know of the possibility.

View solution in original post

8 Replies

Avatar

Community Advisor

Though I have not worked with HTMX, but HTL itself is a templating language and essentially can handle anything that runs on a browser. So, I don't see an issue in what you are trying to achieve, but I don't see any major benefit either. 
You can always run logic on server side and can process them any which way you like be it JSON or HTML. 

So, you can definitely try it out and let the community know about the results . Hope this helps.

Avatar

Level 2

Code duplication and increased maintenance effort are the issues I'm attempting to resolve. If you have interactivity, you must generate the same HTML on the client side that is available on the server side. If changes are needed, you must make them in both the front end client side js and the htl. If it is possible to return the htl of the sling model of the search Result component only the modifying of some parameter, and return only this html, it will make development and maintenance much simpler because templating is done once rather than in both htl and js.

Avatar

Community Advisor

I don't think AEM provides any OOB feature for your requirement but that can be achieve by some way like:

you can convert json to xml and then xml to HTML with the help of xslt or if you have already html available you can take help from "com.day.cq.contentsync.handler.util.RequestResponseFactory;" to achive this.

Hope this helps

Umesh Thakur

Avatar

Level 4

Hi @ronak_mehta ,
I haven't worked with Springboot, Thymeleaf or HTMX, but it sounded like you are looking to process the search results and generate the entire HTML on the server side, which HTL and Sling Models can do for certain like @h_kataria mentioned.

One way to do is when the user enters the search term, you will have to request page again with the  search term in the URL query param
e.g: http://localhost:4502/content/not-htmx-app/search.html?s=<search term>
Then use sling model to reach the search parameter (request.getParameter('s')) and perform the search (query builder) on the server side.
Once you have the results you can use HTL to render the HTML.

Avatar

Level 2

Yes, the Sling model does that, and I have already implemented it as stated in the question. However, because this component is a search result, it has interactive elements. If the search term changes, a new response will need to be shared, but there is a way to handle templating on the Js side by generating from JSON response for that. However, I was wondering if I could also use the Sling model in this way, by using a servlet to update and generate the new HTML and send in the response. I have tried, but I have not found a way to invoke this using a Servlet. And the default sling model approach would require a whole page reload.

Avatar

Correct answer by
Level 4

@ronak_mehta ,
Thanks, I understand your problem now better. There could be a way though not my favorite. 
1) Have your search servlet return the paths of the search result resources.
2) In the component corresponding to the search result resource, add a new html with a selector with HTL + Sling model code necessary to return the HTML that you like for the search result.
-cq:Component[name='mypage']
 -mypage.html
 -mypage.searchversion.html
3) In JS make a call to each of the paths with the above created selector
e.g: /content/mysite/page1withsearchterm.searchversion.html

You will have to make multiple calls, one for each search result item, though. This might still work with paginated results and dispatcher caching, wouldn't recommend it unless you want the HTML rendered only by the server. Just letting you know of the possibility.

Avatar

Administrator

@ronak_mehta Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!



Kautuk Sahni