Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to get listChild from parent using JS API

Avatar

Level 2

Hello i want to know how to get List Page under parent using JS API,

 

and i want to display it page with view of article, anyone can give me a suggestion? what should i do on JS, Thanks alot

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hello, 

To be honest I found your question quite confusing. From what I can understand you want to list the children of the current page or something, using the JS Use-API?

If so, then here is a solution you can start with.

Here is the JS script that will find all the child pages and extract the page title:

"use strict";
use(function () {

    var childTitles = [];
    var children = currentPage.listChildren();
    for (var child in Iterator(children)) {
        childTitles.push(child.getTitle());
    }

    return {
        children: childTitles,
    };
});

Here is the component HTL where we use the JS Use-API to call the script we just made and then display each child page title:

<div data-sly-use.model="script.js">
    <ul data-sly-list="${model.children}">
        <li>${item}</li>
    </ul>
</div>

Here is where the files are stored (demo is the component):

Selection_099.png

Now I create a page with 2 children:

theop76211228_0-1586264809091.png

 

And if I place the demo component on test-page, here is the result:

theop76211228_1-1586264908589.png

Hopefully that helps.

 

View solution in original post

2 Replies

Avatar

Correct answer by
Level 10

Hello, 

To be honest I found your question quite confusing. From what I can understand you want to list the children of the current page or something, using the JS Use-API?

If so, then here is a solution you can start with.

Here is the JS script that will find all the child pages and extract the page title:

"use strict";
use(function () {

    var childTitles = [];
    var children = currentPage.listChildren();
    for (var child in Iterator(children)) {
        childTitles.push(child.getTitle());
    }

    return {
        children: childTitles,
    };
});

Here is the component HTL where we use the JS Use-API to call the script we just made and then display each child page title:

<div data-sly-use.model="script.js">
    <ul data-sly-list="${model.children}">
        <li>${item}</li>
    </ul>
</div>

Here is where the files are stored (demo is the component):

Selection_099.png

Now I create a page with 2 children:

theop76211228_0-1586264809091.png

 

And if I place the demo component on test-page, here is the result:

theop76211228_1-1586264908589.png

Hopefully that helps.

 

Avatar

Level 10
Hello, if my answer was helpful, could you please like it and select it as the correct answer?