Level 2

Solved

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

Forum|Forum|1 year ago
August 29, 2024
4 replies
1715 views

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.

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 Balaram_Rudra

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

h_kataria

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.

R

ronak_mehtaAuthor

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.

Umesh_Thakur

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

R

ronak_mehtaAuthor

Level 2

Ok, so it does not have this ability.

B

Balaram_Rudra

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.

R

ronak_mehtaAuthor

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.

B

Balaram_RudraAccepted solution

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.

kautuk_sahni

Community Manager

@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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded