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)

psrpjayaem

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)

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)

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.

Veena_Vikram

MVP

03-09-2020

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

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