Posted by ErichSteinboeck on 28 Jun 2008 17:35, last edited by Helmut_pdorf on 17 Mar 2016 08:33
Tags: ascending descending include list order pages sort sortable-lists
How to Create a Sortable List of Pages
|
Table of Contents
|
Listing pages that you have are among the features that you want to have in your site for facilitating navigation among pages. It is true that you can create indexes to help the user find a particular page, or he can Search for a page or use the Tags cloud. However, having a list that gets automatically populated whenever a page is added or edited, may prove handy and worthy.
Wikidot offers the function List all pages, which lists all pages alphabetically and, thus, may do the trick. However, as its name says, it lists all the pages. This may prove not useful for two reasons:
- On the one hand, some pages are not for users (such as administrative pages pertaining to the categories system: or admin:). Displaying them together with the remaining pages simply clutters the list.
- On the other hand, the resulting list is simply an alphabetical one, neither organized in categories nor with possibilities to be searched for edit date or creation date.
There is a way of creating sortable lists that solves above limitations. The procedure involves a four-step setup.
How to Set Up Sortable Lists of Pages Step-by-Step
Steps 1 & 2 are a one-time setup procedure to create the support for all individual Sortable lists of pages.
Step One: Set Up a ‘Base Page’
In this step you create a new page in an inc: category to be called list-pages-template. Do the following:
- Create a new page called inc:list-pages-template
- copy and paste (or type) the following module syntax onto the page (copy and paste from the html version)
{$heading}[[# A_{$anchor}]]
[[size {$size}]]
[[module ListPages category="{$category}" perPage="{$perPage}" limit="{$limit}" _
separate="false" {$attributes} _
prependLine="[[include inc:list-pages-prepend page={$page} | anchor={$anchor} | styleT={$styleT} | styleE={$styleE} | styleC={$styleC}]]" _
appendLine="[[/table]]" _
]]
[[row]][[cell style="{$styleT}"]][{$urlEdit}] {$urlView}[[/cell]][[cell style="{$styleE}"]]%%date_edited|%e %b %Y, %R%%[[/cell]][[cell style="{$styleC}"]]%%date|%e %b %Y, %R%%[[/cell]][[/row]]
[[/module]]
[[/size]]
Step Two: Set Up a ‘prepend page’
- Create a new page called inc:list-pages-prepend
- Copy and paste (or type) the following code onto the page:
[[table]][[row]][[cell style="{$styleT}"]]//Page Name//[[/cell]][[cell style="{$styleE}"]]//Last Edited//[[/cell]][[cell style="{$styleC}"]]//Date Created//[[/cell]][[/row]][[row]][[cell style="{$styleT}"]][[size 80%]]Sort [/{$page}/order/titleAsc#A_{$anchor} ascending]/[/{$page}/order/titleDesc#A_{$anchor} descending][[/size]][[/cell]][[cell style="{$styleE}"]][[size 80%]]Sort [/{$page}/order/dateEditedDesc#A_{$anchor} newest first]/[/{$page}/order/dateEditedAsc#A_{$anchor} oldest first][[/size]][[/cell]][[cell style="{$styleC}"]][[size 80%]]Sort [/{$page}/order/dateCreatedDesc#A_{$anchor} newest first]/[/{$page}/order/dateCreatedAsc#A_{$anchor} oldest first][[/size]][[/cell]][[/row]]
Step Three: Set Up a ‘Front-End’ Page
This front-end page specifies default values for all include parameters of your lists. This will make it much easier to create individual and customized //Sortable list of pages", as you only have to specify the relevant parameters on each [[include …]] statement in these individual and customized lists (see step 4). Do as follows:
- Create a new page called inc:list-pages
- Copy and paste (or type) the following code onto the page:
[[include inc:list-pages-template
heading={$heading} | heading=++ Category "{$category}" |
anchor={$anchor} | anchor={$category} |
category={$category} | category=_default |
page={$page} | page=system:list-pages |
perPage={$perPage} | perPage={$limit} |
limit={$limit} | limit=10000 |
attributes={$attributes} | attributes=order="@URL" |
styleT={$styleT} | styleT=padding-right:1em |
styleE={$styleE} | styleE=text-align:right; padding-right:1em; width:12em |
styleC={$styleC} | styleC=text-align:right; width:13em |
urlEdit=/%%fullname%%/edit/true edit |
urlView=: %%title_linked%% |
size={$size} | size=100% |
]]
Once you have done this, the page will display a list of the pages in the "_default" category. However, don't think of this as your final list. This page is only part of the basic setup, and, thus, should remain "hidden." For creating Sortable lists of pages that you can really use, you need to continue into step four.
Step Four: Create Individual Sortable Lists of Pages
You may need just one Sortable list of pages, or you might want to create more than one. You might prefer to create individual lists in different pages, or just several lists in the one page. Finally, you might want to customize your lists (e. g. one that lists all pages for some selected category, or one that lists all pages for all categories). This third step allows you to do all of that by way of creating individual Sortable lists of pages customized to your needs.
Let's talk about customization first. You can customize each Sortable list of pages according to the parameters shown in the following table (see some examples in the next section):
| Parameter | Default1 | Description |
|---|---|---|
| page | system:list-pages | The name of the "Sortable List of Pages" page you are creating; i. e. the page where you use [[include inc:list-pages ...]] |
| category | "_default" | A category name or category names as defined in the module ListPages documentation. Pages will be listed from this/these category/ies. Note that you cannot use the alias categories |
| heading | ++ Category category | Any Wikidot text to be used as a header |
| anchor | category | If the (list of) category/ies include any characters except "A/a" through "Z/z", "0" through "9", "-", "_", ".", or "%", a unique text string must be specified to be used as an "anchor" for generated links. An anchor prevents the page from scrolling to the top when a user clicks any of the sort links. For example, if "category=*" use "anchor=all" |
| limit | 10000 | the maximum number of pages (i. e. lines) that will be listed as defined in the module ListPages documentation |
| perPage | limit | the number of maximum of pages (i. e. lines) that will be listed before automatic ListPages pagination starts. As defined in the module ListPages documentation |
| attributes | rssEmbed="false" rssShow="false" | Any required additional ListPages attributes as defined in the module ListPages documentation |
| styleT | padding-right:1em | Any CSS style attributes for the first column (Page Name). Note that due to a Wikidot parser problem this style attribute currently cannot be applied to the header row of the first column. |
| styleE | text-align:right; padding-right:1em; width:12em | Any CSS style attributes for the second column (Last Edited Date). Note that due to a Wikidot parser problem this style attribute currently cannot be applied to the header row of the second column. |
| styleC | text-align:right; width:12em | Any CSS style attributes for the third column (Creation Date). Note that due to a Wikidot parser problem this style attribute currently cannot be applied to the header row of the third column. |
To set up an individual and customized Sortable list of pages you need to do the following:
- Create a new page that will hold your customized list (or lists, if you code several of them in the same page).
- Include the "front-end" page that you created in step 2 using an [[include inc:list-pages ...]] statement (see Examples below).
- Write down the parameters that you require for customizing your list (write them as parameter=value |, as shown in the examples in the next section).
The most important parameter — page — is the name of your actual individual page (i. e. this new page that you have just created), so that the different sorting options work within the same page.
All other parameters are optional, and not writing them simply means that the "default" value of the parameter will be displayed instead. Customizing your list means, basically, writing down those parameters that you require (and their values).
You can create Sortable lists of pages in different pages, but you can also display several of them in a single page (as in the example below) by simply repeating the procedure of step three (i. e. syntax and customization) as required.
Note: the pages that you create in step three do not necessarily need to be within the inc: category. It can be in any category, e. g. the _default: category. As far as in any of those pages you include the inc:list-page page (your "front-end" page, see step 2), you should be alright.
Examples
Here are some examples of customized Sortable list of pages. To the left of the table is the syntax that was written. To the right, the resulting output. You can now click on each sorting option (ascending / descending, etc) and see it working!
| What you type … | What you get … | |||||||||||||||||||||
|
Category “_default”
. |
|||||||||||||||||||||
|
Community How-To's
. |
|||||||||||||||||||||
|
All Categories
. |
How it Works
This How-To makes use of two ideas presented in
- Module Attributes Via URL, to dynamically specify order (sort) sequence via the URL link, and
- Include Variables With Default Values, to pre-define values for include variables.
Links
A real-life application of this idea can be found in the Community Wikidot List all Pages.
Backlinks
Authors
ErichSteinboeck. Please visit his/her userPage.
JDPerezgonzalez. Please visit his/her userPage.
Dear users,
please rate "+" this HowTo, it is a very clever illustration of the power of includes.
Thanks, Erich.
This is helping me a lot. At first at thought about organizing my wiki's content in sections - categories - pages containing included individual, smaller, pages. But now I see that tags are a much cleaver way to organize it.
??? What did I do? I did something wrong.
O followed this guide and succesfully created my sortable list of pages, however it's working reversely. It's not displaying category AAA pages, it's doing exactly the opposite, hiding all category AAA pages and listing everything else.
Show us your code (or at least post a link to the page you are working on).
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
Hi,
I'm just wondering if this can be used to create a list of pages created by a particular user?
http://hobstarcs.wikidot.com/user-pages:_template
No, I don't think there is any way to do that (except for manually entering it into the search box)
Something similar has been done here on the community site though, with userpages. It uses the Backlinks module, and requires the page creator to manually add a "signature" to their page.
To do this, add this to your template page:
And tell your users to add this to the bottom of any page that they edit:
Then on a page titled include:signature you need to add this code:
In my opinion, it's almost not worth the hassle on most sites, as it relies on the user adding their 'signature' all the time. But if you don't mind that, this might be the answer you're looking for.
Oh,
Hope you don't mind… I put Hobstar CS on my page ;)
Shane Smith
Web Developer and Wikidot Community Administrator
Links: Blog, Wikimated, Editor (STE), Documentation
Thanks leiger,
Yeah, looks like too much hassle.
No prob, a link to that page? :)
I reworked the table to select by %%created_by%%
Clicking on the username selects: take a look
update sorry — forgot that it's located in a private category. Feel free to join the site to check it out.
first let me say thanks for your good work.
second, let me show you what I'm getting after following your step-by-step:
Page Name Last Edited Date Created
Sort ascending/descending Sort newest first/oldest first Sort newest first/oldest first
[{$urlEdit}] {$urlView} 4 Dec 2010, 20:57 4 Dec 2010, 20:57
[{$urlEdit}] {$urlView} 4 Dec 2010, 20:48 4 Dec 2010, 15:45
[{$urlEdit}] {$urlView} 3 Dec 2010, 22:03 3 Dec 2010, 22:02
I've got the site closed right now, because I'm just learning. But I'll open it up to you if it would help. thanks!!
Yeah, I'm having a similar problem.
My site is personal, but I'm learning to code the wiki and I know I will make a lot of mistakes, so I made a second site for code tests.
Here's my site:
http://publicysym.wikidot.com/testindex
http://publicysym.wikidot.com/include:list-pages
http://publicysym.wikidot.com/include:list-pages-template
http://publicysym.wikidot.com/include:list-pages-prepend
Can someone help me figure out what's going on here?
Hey ysym, sorry about taking so long to reply.
Took me a bit, but I found two problems (and fixed them) with your code:
1. Firstly, on your testindex page you have set the size to 10, which isn't valid. Try changing that to a percentage like 100% instead (or something in units of px, pt or em)
2. Secondly, on your include:list-pages page, there are a few variables missing. Just to make things easier I've re-written that page completely for you (and made the code a bit neater/cleaner), so delete all of the code on that page and change it to this:
[[include include:list-pages-template
|heading={$heading}
|heading=++ Category ``{$category}''
|anchor={$anchor} |anchor={$category}
|category={$category} |category=_default@@
|page={$page} |page=include:list-pages
|perPage={$perPage} |perPage={$limit}
|limit={$limit} |limit=10000
|attributes={$attributes} |attributes=order="@URL"
|styleT={$styleT} |styleT=padding-right:1em
|styleE={$styleE} |styleE=text-align:right; padding-right:1em; width:12em
|styleC={$styleC} |styleC=text-align:right; width:13em
|urlEdit=/%%fullname%%/edit/true edit
|urlView=: %%title_linked%%
|size={$size} |size=1em
]]
An example of this working on my test site is here, after I made those changes:
By the way, it's a good idea to have a separate test site for this type of thing - so you made the right choice there. I have one as well, which came in useful just now trying to figure out what your problem was :)
Shane Smith
Web Developer and Wikidot Community Administrator
Links: Blog, Wikimated, Editor (STE), Documentation
Sorry about taking so long to reply. Yes, an open site (with page options visible so we can see all of the source code) would make it much easier to solve your problem :)
Shane Smith
Web Developer and Wikidot Community Administrator
Links: Blog, Wikimated, Editor (STE), Documentation
Hi there - I'm having the same problem as visiblehand:
I think I've located what the problem is, but I'm not sure WHY it's a problem. I think I've done the permissions right so you can see these pages, but let me know if not (and how to fix it! Really new at this).
http://csquared.wikidot.com/inc:list-pages-template - the error this page gives (inc:list-pages-prepend does not exist) is patently untrue, as the following will prove.
http://csquared.wikidot.com/inc:list-pages-prepend
http://csquared.wikidot.com/inc:list-pages - here's this one, in case you need it. I don't know if the fact that they're inc: rather than include: makes a difference, but I found it simpler to rename the pages to match the code than the other way around.
Thanks in anticipation,
CSquared
You don't have permissions set right. Your site is still set to Private. To keep your site visible, but block automatic membership, set your site to "Closed" under Access Policy. Then in the Permissions section, make sure you have view permissions turned on for all categories and "Show page options to" for at least Wikidot members.
With those settings we should be able to see your page(s) and view the page source and offer some help.
Also, you have apparently deleted your system:join page. This page is the default landing page for those who do not have permission to access your site. That is what tells me that your Access Policy is set to private. In order to edit that landing page, your site has to be set to private to expose that setting.
Try changing your settings and let us know when it's done so we can take a look.
Bootstrap Playground - Wikidot Meets Twitter Bootstrap!
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
OK, thanks. Followed your instructions, hopefully everything should be good now. Sorry, I still don't really know what I'm doing. Basic editing I'm fine with, anything else is hella confusing.
Is system:join essential, or does it not matter that it's gone? I can always insert a new one if necessary.
No we still cannot see anything on your site, it still seems to be set to Private. Have you gone to your site manager (the page called admin:manage) and then in the left hand menu selected Access Policy, changed it to closed and then further down the page pressed Save?
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Hmm. I did save, but I'm on a really unreliable internet connection at the moment, so maybe it didn't go through. Seems to be fine now. I hope.
Really sorry about this! ^^;
Have a look on the handbook:
http://handbook.wikidot.com/en:public-or-private
http://handbook.wikidot.com/en:site-manager
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I cannot detec any error …
What you need NOW is a 4. - n. page like a new (or old exiting) "List of drives"which contains as a minimum the call of the "inc:list-pages" overview:
[[include inc:list-pages
page=List-of-drives |
category=drives |
heading=++ All Drives]]
And you will get such sortable list.
or all Categories in an extzra header under the upper list :
[[include inc:list-pages
page=List-of-drives |
category=* |
anchor=all |
heading=++ All Categories]]
( but should bette on another page…)
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
It's really only necessary if you have your site set to private. It provides a landing page for "unauthorized" visitors. It's intended use is to provide a message about the fact that your site is private and how to become a member (if you want others to join). But, we're getting a bit off topic…
I don't see any obvious problems with your sortable list pages code. Do you have a page created that you're actually listing some pages so we can see it in action?
Bootstrap Playground - Wikidot Meets Twitter Bootstrap!
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
Whoops, forgot to post it (it was meant to be in the first post).
http://csquared.wikidot.com/test
It seems to only be the page names that aren't working properly, and I assume it's something to do with the disconnect that says a page that exists doesn't.
I really appreciate all this help. Hopefully I can give some back once I know what's going on better.
As for system:join - at the moment, I'm the only person using the site anyway, so it would seem it's not hugely needed. I'll pop a quick message back up, though.
I see you're trying to use the example code from the tutorial instead of adapting it to your site-specific needs.
Instead of this (which has the page setting pointing to a page on this site):
Try this (pointing the page back to your test page):
Once you confirm that's working, you can further expand your control over the list with the other options that are documented (like categories, the heading, other ListPages attributes, etc.)
Bootstrap Playground - Wikidot Meets Twitter Bootstrap!
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
I could have been more clear in explaining the probem:
You're telling the include to display the sorted list on a page named howto:sortable-list-of-pages which does not exist on your site. That's why you're getting the page does not exist message. That page exists here on the Community site in the "howto" category.
You have your code on a page called test, so that is the page you want to display your sorted results on. By changing the page= parameter to point to the correct page on your site, everything should be a lot happier.
Bootstrap Playground - Wikidot Meets Twitter Bootstrap!
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
You should change the test page : page=test ( teh name of the "calling" page which holds this inlcude!
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Aha! I've found the problem! Changing page=howto(etc.) to page=test helped, but I found an error in the code in the howto. In include:list-pages, it contains the line page=system:list-pages where it should be page=include:list-pages. Or, at least, it works with the latter, and presents [{$urlEdit}] {$urlView} instead of the actual page names with the former.
Thanks for all the help, guys. Since I'm not certain that's the right thing to do, I won't edit the howto - but if it IS correct, do change it. Confused the hell out of me.
If you look closely at the docs, you'll see that system:list-pages is the default setting for the page= parameter (which you are overriding with page=test with your corrected code now). system:list-pages is a default page created by Wikidot for all new sites (and it seems you have deleted that page too). The documentation could be a bit clearer on this. I'll take a closer look and see if I can help make it more clear.
Keep in mind that in general when you're looking at what's displayed on include pages you create, you don't always get the results you expect, or in some cases it can look totally whacked. It's the include statement on your calling page (test in your case) where the final output is happening based on the values you pass through the various variable that are available.
As a beginner you tackled a pretty high level howto here, so don't feel bad if it seems confusing. You did well and asked your questions in the right place. I remember that it took me a while to fully wrap my head around the "include concept" when it was first introduced.
Another good place to ask questions is on the Community Forum. In general, you will have a larger audience there (although most of us who are really active in the forums keep an eye all of the activity around here).
Bootstrap Playground - Wikidot Meets Twitter Bootstrap!
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
Peter-ZA