Page Manager Tutorial - part 3

by pieterh on 05 Oct 2009 12:00

This is the third part of a slow tutorial in how to build complex tables and views using the new ListPages. It's based on a new page manager that will eventually let us "manage all pages (rename, delete, tag) from one place", as weneed:55 says. You can play with the work in progress as we develop it.

4. How to truncate long strings

Our last example had only four columns but you'll soon want to add more. It quickly becomes clear that some strings are too long, and make a mess of things. For example, some people use long usernames or long page titles. We'll truncate long strings using some CSS to define a 'truncate' class:

.truncate {
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;

And we use this in the ListPages layout by adding a style to the cells we want to keep short:

    [[cell class="truncate"]]
      string comes here...

The great thing about using the fixed table layout and the truncation is that the resulting table looks nicely balanced with a minimum of fussing with column widths. In the page manager I set the first column (with the page name) to 40% width, and the rest gets laid out automatically. It just works. On some browsers you will see the ellipsis, on others not.

5. Creating a second view

When we work with a list of pages it's useful to be able to see the largest, most recent, most commented pages at the top. Here is how we order by size (the same technique can be used for any column that works as a ListPages 'order=' value). We change the header-page 'size' cell:

      [/system:page-manager/order/size Size][/system:page-manager/order/size%20desc ▼]

This works by creating a link back to the same page, passing additional arguments. We use those arguments by adding some magic to the ListPages command:

order="@URL|updated_at desc"

This says, "take the order argument from the URL, but if it's not specified, order by descending updated_at". The @URL feature is essential to the page manager. What it lets us do is create a single page that shows many different views, depending on how we link to it. It's either elegant or confusing, depending how you see it, that the links are all produced by the page itself.

Maybe it's simpler to understand if you realize that each view is independent, cached, and specified by a full URL. You cannot click once to get one view, and click again to get a refined view. The second view replaces, does not extend the first.

Note that if you use a different page name, you have to change this code.

Comments: 11

Add a New Comment