Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to get listChild from parent using JS API

iwanttobeDev
Level 2
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
Theo_Pendle
Correct answer by
Community Advisor
Community Advisor

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
Theo_Pendle
Correct answer by
Community Advisor
Community Advisor

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

Theo_Pendle
Community Advisor
Community Advisor
Hello, if my answer was helpful, could you please like it and select it as the correct answer?