Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

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

Avatar

Employee

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).

vikas3_0-1677497052078.png

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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

View solution in original post

4 Replies

Avatar

Community Advisor

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

 

Avatar

Community Advisor

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

Avatar

Employee

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).

vikas3_0-1677506295156.png

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

vikas3_1-1677506363628.png

vikas3_2-1677506424899.png

 

Avatar

Correct answer by
Community Advisor

@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