Welcome, guest ( Login )

» Home (JDC Blog)
» Forums

Page Tags

search select filter pivot report collect

Search Tags:
WikiHome » 2005-11-16-NavigatingCollectionsOfPagesWithFilteredSearch

Navigating Collections of Pages with Filtered Search

Version 1, changed by ScottMcmullan. 01/19/2006.   Show version history

By ScottMcmullan at 01/19/2006 09:34PM Tags: search, select, filter, pivot, report, collect

Some times you want to view a list or a table or a collection of pages based on some filter or "pivot". You want to be able to pick from a list and then view pages based on your selection.

For example here on the JDC, we're moving code examples into individual pages to allow them to be tagged, searched, and discovered in different ways:

Filtered (or Pivoted) Searches in Jot

So how does this work? The basic idea is to create a Jot page that uses an HTML form to allow users to select one or more filter values. You then perform a Jot search based on these filter arguments in the page's query string.

Let's take a look at the ViewExamples page used here on the JDC. (Note: this code requires the use of an HTML form, so we'll need to use XML mode to edit our page.)

Step 1: Create the HTML form

This is the standard HTML form that hard-codes a dropdown list of choices for navigating the JDC examples. Note that the form's action points back to my ViewExamples wiki page. 

   <form action="wiki:ViewExamples" method="GET">
   <select name="tag">
      <option value="">View examples by tag...</option>
      <option value="search">search</option>
      <option value="search">table</option>
      <option value="search">form</option>
      <option value="all">All Tags</option>
   </select>
   <input type="submit" value="Go" />
   </form>

Step 2: Search for pages based on user selection

When the user makes a selection and presses the "Go" button, the tag query string parameter is added to our page. So the page's URL ends up looking like: 

http://developer.jot.com/WikiHome/ViewExamples?tag=search

I access the query string parameter with the ${req/args/tag} expression and use it to parameterize my search. I use a filter that returns only those pages with the tag specified by req/args/tag: 

<jot:search forFormName="DevDocExampleForm" filter="${it/main/tags = req/args/tag}" set="exampleSet" />

Step 3: Display your pages

With the set of pages from the search in hand, you can display them any way you want. Common methods include a Jot table or looping over the set and displaying some type of list.

Here's code that uses a loop to display the examples and their text in a simple list: 

   <jot:loop over="exampleSet">
      <br /><br />
      <h3><a href="${it/name}">${it/DevDocExampleForm/title}</a></h3>
      by <a href="wiki:/${it/createUser}-profile" style="color: #999">${it/createUser}</a><br />
      <jot:include node="${it}" />
      <br />
   </jot:loop>

Complete Source

Here's the full source of ViewExamples. Remember this requires working in XML editing mode. There's a bunch of other stuff in here to make the page a bit prettier. You can play with it by going to the ViewExamples page.

Of particular interest is the way I populate the select box from a search result instead of hard-coding the list. First I search for all example tags using <jot:search forFormName="DevDocExampleForm" collect="it/main/tags" set="exampleTags" />, then construct the option list by looping over exampleTags: 

      <jot:loop over="exampleTags">
         <option value="${it}">${it}</option>
      </jot:loop>

Snapshot of ViewExamples 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:jot="http://www.foopee.com/ns/s3/srvtmpl/">
   <br />
   <jot:search forFormName="DevDocExampleForm" collect="it/main/tags" set="exampleTags" />
   <form action="wiki:ViewExamples" method="GET">
   <select name="tag">
      <option value="">View examples by tag...</option>
      <jot:loop over="exampleTags">
         <option value="${it}">${it}</option>
      </jot:loop>
      <option value="all">All Tags</option>
   </select>
   <input type="submit" value="Go" />
   </form>
   <br />
   <jot:if test="${util:isDefined(req/args/tag)}">
   <jot:then>
      <jot:if test="${req/args/tag = 'all'}">
      <jot:then>
         <h2>All Examples</h2>
         <jot:search forFormName="DevDocExampleForm" set="exampleSet" />
      </jot:then>
      <jot:else>
         <h2>All Examples Tagged <i>${req/args/tag}</i></h2>
         <jot:search forFormName="DevDocExampleForm" filter="${it/main/tags = req/args/tag}" set="exampleSet" />
      </jot:else>
      </jot:if>
   </jot:then>
   <jot:else>
      <jot:search forFormName="DevDocExampleForm" filter="contains(it/path, page/name)" set="exampleSet" />
   </jot:else>
   </jot:if>
   <jot:loop over="exampleSet">
      <ol>
         <li><a href="#${it/name}">${it/DevDocExampleForm/title}</a>
<span style="color: #999; font-size: smaller;">by
<a href="wiki:/${it/createUser}-profile" style="color: #999">${it/createUser}</a></span></li>
      </ol>
   </jot:loop>
   <jot:loop over="exampleSet">
      <br /><br />
      <h3><a name="${it/name}"><a href="${it/name}">${it/DevDocExampleForm/title}</a></a></h3>
      <span style="color: #999; font-size: smaller;">by
<a href="wiki:/${it/createUser}-profile" style="color: #999">${it/createUser}</a></span><br />
      <jot:include node="${it}" />
      <br />
   </jot:loop>
   <br /><br />
   <jot:include node="PostNewExampleForm" />
</html>


Back to WikiHome



Attachment (1)

  File By Size Attached Ver.
viewExamplesBy.png ScottMcmullan 10K 11/16/2005 1 Delete attachment