Issue in fetching the child pages of a specific page (specific path) using only HTL/Sightly | Community
Skip to main content
V
Adobe Employee
vikas3Adobe Employee
Adobe Employee
February 27, 2023
Solved

Issue in fetching the child pages of a specific page (specific path) using only HTL/Sightly

  • February 27, 2023
  • 2 replies
  • 1698 views

Hi, I want to fetch the child pages of a page when my component is being dropped on the page, so as of now I was using the below piece of code (using the currentPage object) and getting the child pages but here it was dynamic means suppose I drop it on the "en" page then getting the child pages of "en" page and if dropping on "welcome" page then getting it's child pages. (refer the below snap for page hierarchy).

Code used (in the HTML file):

 

<div class="menuitems"> <ul class="cmp-navigation__group" data-sly-list="${currentPage.listChildren}"> <li class="cmp-navigation__item cmp-navigation__item--level-0"> <a href="#" class="cmp-naviagtion__item-link">${item.title}</a> </li> </ul> </div>

 

 New scenario - Till this point it is working fine but now I want to show/fetch the child pages specific to "welcome" page when the component is dropped on any page let it be - "en", "welcome" and so on (Like I want this to be hard-coded for path - "/content/first-demo/us/en/welcome") always. 
So, how that can be done using the HTL only as I don't want to use the Sling model here.

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 krishna_sai

@vikas3 If you are OK to use javascript use-api

"use strict"; use(function () { var resourceResolver = resource.getResourceResolver(); var welcomeRes = resourceResolver.getResource('/content/first-demo/us/en/welcome'); var data = {}; data.page = pageManager.getContainingPage(welcomeRes); return data; });


In sightly,

<sly data-sly-use.data="${'component.js'}"/> //Iterate over page children as your requirement <ul data-sly-list="${data.page.listChildren}"> <li> ${item.title}</li><br> </ul>


Hope this works
Krishna

2 replies

Manu_Mathew_
Community Advisor
Manu_Mathew_Community Advisor
Community Advisor
February 27, 2023

@vikas3 I believe, you could use something like - data-sly-test="${item.path == '/content/first-demo/us/en/welcome'}"

 

<sly data-sly-list="${currentPage.listChildren}"> <sly data-sly-test="${item.path == '/content/first-demo/us/en/welcome'}"> <ul data-sly-list="${item.listChildren}"> <li> <a href="#">${item.title}</a> </li> </ul> </sly> </sly>

 

    krishna_sai
    Community Advisor
    krishna_saiCommunity Advisor
    Community Advisor
    February 27, 2023

    This doesn't work if we author this under welcome page i.e., demo1 page

      krishna_sai
      Community Advisor
      krishna_saiCommunity AdvisorAccepted solution
      Community Advisor
      February 27, 2023

      @vikas3 If you are OK to use javascript use-api

      "use strict"; use(function () { var resourceResolver = resource.getResourceResolver(); var welcomeRes = resourceResolver.getResource('/content/first-demo/us/en/welcome'); var data = {}; data.page = pageManager.getContainingPage(welcomeRes); return data; });


      In sightly,

      <sly data-sly-use.data="${'component.js'}"/> //Iterate over page children as your requirement <ul data-sly-list="${data.page.listChildren}"> <li> ${item.title}</li><br> </ul>


      Hope this works
      Krishna

        Terms & ConditionsAccessibility statement

        Loading footer...