extract other child component's properties in current child component among the list of child nodes on AEM Page using Sightly alone (no sightly model in java)

Avatar

Avatar
Level 1
psrpjayaem
Level 1

Likes

0 likes

Total Posts

3 posts

Correct reply

0 solutions
View profile

Avatar
Level 1
psrpjayaem
Level 1

Likes

0 likes

Total Posts

3 posts

Correct reply

0 solutions
View profile
psrpjayaem
Level 1

03-09-2020

extract other child component's properties in current child component among the list of child nodes on AEM Page using Sightly alone (no sightly model in java)
For example, the aem page named test is created with the header, hero and footer components.
From the footer's HTL, there is a need to find the header component present in the list of child nodes of AEM Page named 'test' and if header component is present, then extract the properties of header component.
psrpjayaem_0-1599146761433.png

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
Theo_Pendle
MVP

03-09-2020

Hi @psrpjayaem,

As @Arun_Patidar mentioned, there is no easy way to do this in HTL and it will always be more verbose and less performance (due to lots of iterating) to perform this kind of complex logic than if you used a Sling model.

In my opinion, you really should be using a model for this kind of requirement, for a number or reasons:

  1. You can unit test this logic if it's in a model, but not if it's in HTL
  2. If you wish to re-use the logic elsewhere, then ou can do so using Java but not using HTL
  3. You can't do any complex error handling in HTL (what if there is no footer node? What if the node is there but it doesn't contain the property you're looking for? Etc.)
  4. Using Java will be far more performant since you can use lookups for properties rather than iterating through all of them and doing a string comparison based on the name each time.
  5. You also de-couple the logic from the view. This is standard best practice in all frameworks I know of, so future developers will have an easier time reading your code.

Hope that helps 🙂

Answers (3)

Answers (3)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,440 likes

Total Posts

3,312 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,440 likes

Total Posts

3,312 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

03-09-2020

You can access the resources using HTL Global Object, but you cannot perform any Business operation in HTL like getting a specific child node without iterating. You need to use either JS Use API or Java.

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

03-09-2020

Is there any specific reason why you should not use models ?

Avatar

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile
Nupur_Jain
MVP

03-09-2020

Hi @psrpjayaem 

 

With HTL, you can extract first the parent of the current component that is footer. Then you can extract header resource from parent resource like this:

 

<div data-sly-test.headerResource="${resource.parent.header}">
<!-- Extract properties if header resource exists with ${headerResource.properties.property1}-->
</div>


OR-----------------------------------------

<div data-sly-list="${resource.parent.listChildren}">
    <div data-sly-test.headerResource="${item.name == 'header'}">
        <!-- Extract properties if header resource exists with ${headerResource.properties.property1}-->
    </div>
</div>

 

 

Here resource represents the current resource. resource.parent basically call getParent method of resource api and provide you with parent resource.

 

you can both the options and whatever fits your usecase better, you can try.

 

Hope it Helps!

Thanks