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.
Solved! Go to Solution.
Views
Replies
Total Likes
@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
@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>
This doesn't work if we author this under welcome page i.e., demo1 page
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).
@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
Views
Likes
Replies
Views
Likes
Replies