Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Can I mix HTL and SPA components in page?

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

274 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

274 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

03-12-2020

Hello Guys,

Is there any way to mix HTL and SPA components in a page (SPA or non SPA template)? Chris Millar at adaptTo conference 2018 said that it is not possible yet. Is there way now? Any Ideas? Thanks.

-AG

AEM htl SPA

Replies

Avatar

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

216 likes

Total Posts

181 posts

Correct Reply

61 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

216 likes

Total Posts

181 posts

Correct Reply

61 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
Vaibhavi
MVP

03-12-2020

Hi @Anudeep_Garnepudi , 

 

Please check out the below thread. Solution is discussed in detail. 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/using-general-htl-componen...

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,168 likes

Total Posts

6,289 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,168 likes

Total Posts

6,289 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

04-12-2020

See the reply from @Nikhil-Kumar 

 

 

If you want to create any component using SPA template then it's not possible.
But you can have your own template created and and create HTL component in the same project structure.

NOTE: You can not use non SPA component in SPA template. As in SPA everything is client-side rendered.
If you see the body.html we only have root div to render at react side.

You can check out my article on the same, soon I will be coming up with one article in which I will list down the issues that I faced during my AEM+SPA project experience.

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

274 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

274 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

04-12-2020

@Vaibhavi , @kautuk_sahni 

Thanks for quick reply. My case is like 2 custom components on page

  1. First/top component only uses HTL as view, no react
  2. Second/bottom component only uses react as view and no HTL

Idea is like the components that are always on top of page will develop using HTL and components which are always used down the page will develop using React.

Avatar

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

250 likes

Total Posts

262 posts

Correct Reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

250 likes

Total Posts

262 posts

Correct Reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
Nikhil-Kumar
MVP

09-12-2020

@Anudeep_Garnepudi - As far as I know it's not possible to mix a Non SPA and SPA component in SPA page.
But you can try adding adding some text or something at the page template level (Which will be hardcoded not a draggable component), But this will be effective across the template.