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

[vikas3]

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.

[Manu_Mathew_]

@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]

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

[vikas3]

Hi @Manu_Mathew_  Thanks for the answer. I checked with your code but what it is doing now - as we have "data-sly-test" it is going inside ONLY when we have "welcome" as one of the Child Pages of the "currentPage" (where the component is dropped) and then it is fetching/showing the child pages of "welcome" page but when we don't have the "welcome" page as on of the child pages then it is not working. 

For example -
CASE 1: It worked for "en" page (refer below image).

CASE 2: It is NOT working where "welcome" page is not one of the child pages (refer 2 snaps).

[krishna_sai · Accepted solution]

@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