1
votes

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.

2

2 Answers

1
votes

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}” ...
1
votes

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