Apr 16, 2012

The power of the List component

Posted by Feike Visser

In this blogpost I will demonstrate the power of the List component in combination with Sling.

Almost every time when you have the requirement "to show a list of ..." you can use the List component. The list component saves you the hassle of writing the plumbing code around getting a list of pages, looping and pagination.

ScreenHunter_03 Apr. 16 15.14


The goal of this example is to render a list of 'page-teasers' with a Read more link to go to that page.

All of this will be implemented *without* writing any Java-code.

Let's get started

I have very simple page-component (extending 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 content 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 template I use the title component for the header of the page and the parsys to drag/drop default components into the page.

Now I am going to create a content-page 'mysite' and 5 child-pages as shown in the picture below.

ScreenHunter_05 Apr. 16 15.30

Creating the teaser-view

Now that we have the template and the content pages, we can think on how we want to display the pages as teasers in the list-view.

To create the 'teaser-view' I add a new file in the page component called 'teaser.jsp', this has the following 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 content page, so for example: /content/mysite/page1.teaser.html.

List component

So the final step is to integrate the teaser-view with the list-component.

I created a new component that extends from foundation/components/list, and I will only overwrite listitem_teaser.jsp.

This file has the following 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 display the page coming 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.

Final step

The final step is to add the custom list component to your page and configure it, you have a range of options to choose how to list the pages (ordering, limiting 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 without writing complex code to get child pages, creating complex dialogs or hardcoding paths in components.

And the author has all the flexbility to control which pages he wants display.