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) | Community
Skip to main content
P
psrpjayaem
September 3, 2020
Solved

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)

  • September 3, 2020
  • 4 replies
  • 4160 views
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.

 

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 Theo_Pendle

Hi @psrpjayaem,

As @arunpatidar 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 🙂

4 replies

Nupur_Jain
Adobe Employee
Nupur_JainAdobe Employee
Adobe Employee
September 3, 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

    P
    psrpjayaemAuthor
    September 3, 2020
    Thanks for the prompt help. I followed this to some extent. However resource is not pointing to footer when printed. Instead resource is printing the template used on the page. In my particular, with reference to screenshot above, I have to traverse from current-node (footer) to the parent node (i.e. /content/) and then drill down to the sibling node i.e.(header) and extract relevant properties.
    VeenaVikraman
    Community Advisor
    VeenaVikramanCommunity Advisor
    Community Advisor
    September 3, 2020

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

      P
      psrpjayaemAuthor
      September 3, 2020
      only presentation logic in front-ned need be applied based on the components present on the aem page instance created
      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      September 3, 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.

      Arun Patidar
        Theo_Pendle
        Theo_PendleAccepted solution
        Level 8
        September 3, 2020

        Hi @psrpjayaem,

        As @arunpatidar 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 🙂

          Terms & ConditionsAccessibility statement

          Loading footer...