In this blog­post I will demon­strate the power of the List com­po­nent in com­bi­na­tion with Sling.

Almost every time when you have the require­ment “to show a list of …” you can use the List com­po­nent. The list com­po­nent saves you the has­sle of writ­ing the plumb­ing code around get­ting a list of pages, loop­ing and pagination.

ScreenHunter_03 Apr. 16 15.14

The goal of this exam­ple is to ren­der a list of ‘page-teasers’ with a Read more link to go to that page.

All of this will be imple­mented *with­out* writ­ing any Java-code.

I have very sim­ple page-component (extend­ing foundation/components/page) with this in the body.jsp

<%@include file=”/libs/foundation/global.jsp” %>

<body> <div class=“header”> <b>This is my header</b> </div>

<div class=“content”> <b>This is my con­tent area</b>

<div class=“header”> <cq:include path=“header” resourceType=“foundation/components/title” /> </div>

<div class=“content_area”> <cq:include path=“par” resourceType=“foundation/components/parsys” /> </div> </div>

<div class=“footer”> <b>This is my footer</b> </div> </body>

ScreenHunter_06 Apr. 16 15.33

As you can see in the tem­plate I use the title com­po­nent for the header of the page and the parsys to drag/drop default com­po­nents into the page.

Now I am going to cre­ate a content-page ‘mysite’ and 5 child-pages as shown in the pic­ture below.

ScreenHunter_05 Apr. 16 15.30

Now that we have the tem­plate and the con­tent pages, we can think on how we want to dis­play the pages as teasers in the list-view.

To cre­ate the ‘teaser-view’ I add a new file in the page com­po­nent called ‘teaser.jsp’, this has the fol­low­ing content:

<%@include file=”/libs/foundation/global.jsp” %>

<div class=“teaser”> <cq:include path=“header” resourceType=“foundation/components/title” />

<div class=“read_more”> <a href=”${listitem.path}.html”>Read More</a> </div> </div>

The teaser-view only shows the header of the page and a Read More link.

You can already see this view when you add .teaser.html to your con­tent page, so for exam­ple: /content/mysite/page1.teaser.html.

So the final step is to inte­grate the teaser-view with the list-component.

I cre­ated a new com­po­nent that extends from foundation/components/list, and I will only over­write listitem_teaser.jsp.

This file has the fol­low­ing contents :

<%@include file=”/libs/foundation/global.jsp”%>

<sling:include path=”${listitem.path}.teaser.html” />

ScreenHunter_07 Apr. 16 16.12

As you see in the listitem_teaser.jsp I am using the <sling:include /> to dis­play the page com­ing from the list-component in a teaser-way.

This is the same if you would do .teaser.html from the content-pages you want to show on your page.

The final step is to add the cus­tom list com­po­nent to your page and con­fig­ure it, you have a range of options to choose how to list the pages (order­ing, lim­it­ing and pagination).

ScreenHunter_04 Apr. 16 15.15

You see the result below, a list of pages shown in the teaser-view.

This is all done with­out writ­ing com­plex code to get child pages, cre­at­ing com­plex dialogs or hard­cod­ing paths in components.

And the author has all the flex­bil­ity to con­trol which pages he wants display.