CODEWITHSUNDEEP
aemsightly
Bikash Sao
Bikash Sao

Reputation: 43

How to display every sub page of the parent of the current page in aem?

I want to display names of every child pages of the parent of the current page except the current page in the component in aem. But my output is coming including the current page name.

 <section id="touractivities">
            <div class="container">
                 <div class="row">
                    <div class="col-sm-12">
                         <ul class="row buttontab">
                           <li class="col-md col-sm-4 col-6"  data-sly-repeat="${CurrentPage.parent.listChildren}">
                              <div class="btnbggradient">
                                        <a href="${item.path}.html" class="shadow">
                                        <i class="icon-${item.name}"></i>
                                        <h5 >${item.title}</h5>
                                        </a>
                                    </div>
                                </li>
                              </ul>
                    </div>
                </div>
        </div></section>

my aem structure:

my aem structure

required output:

required output

output im getting:

output im getting

The code is correct except that the bird watching li should not come while i am in bird watching page.

Upvotes: 1

Views: 1377

Answers (2)

Bikash Sao
Bikash Sao

Reputation: 43

<section id="touractivities">
                <div class="container">

                    <div class="row">
                        <div class="col-sm-12">
                            <ul class="row buttontab" data-sly-list="${CurrentPage.parent.listChildren}">

                                   <li class="col-md col-sm-4 col-6" data-sly-test="${item.path != currentPage.path}" >
                                        <div class="btnbggradient">
                                            <a href="${item.path}.html" class="shadow">
                                            <i class="icon-${item.name}"></i>
                                            <h5 >${item.title}</h5>
                                            </a>
                                        </div>
                                    </li>

                            </ul>
                        </div>
                    </div>
            </div></section>

Upvotes: 1

Vlad
Vlad

Reputation: 10780

You can switch from data-sly-repeat to data-sly-list (so you can move it to the ul element). You can then use data-sly-test on the li element and check each item path against the current resource/page path:

<li data-sly-test=“${item.path != resource.path}” ...

Upvotes: 1

Related Questions