Sorting and Filtering

Google Mashup Editor (GME) includes tags for modifying the data users see from feeds by sorting or filtering the source of the data. This document describes the gm:sort and gm:filter tags and how you can use them in your GME applications.

Contents

1. Sorting Data
2. Filtering Data
3. Preferred Elements

Sorting Data

When you display data in a list, you can set your list to allow the user to sort the data on various elements. Here's how you can make the list sortable:

• In the gm:list tag, include a gm:sort tag for each column you want the user to be able to sort by.
• In the gm:template tag, include a gm:header tag for each column that you previously specified with a gm:sort tag.

The following example shows how you can enable sorting in your list:

<gm:page title="sort sample">
  <gm:list id="" data="${user}/sortme" template="sortTemplate">
    <gm:sort name="title" ref="atom:title"/>
  </gm:list>
  <gm:template id="sortTemplate">
    <table>
      <tr>
        <td><gm:header sort="title">Title</gm:header></td>
        <td><gm:header>Content</gm:header></td>
      </tr>

      <tr repeat="true">
        <td> <gm:text ref="atom:title"/> </td>
        <td> <gm:text ref="atom:content"/> </td>
        <td> <gm:editButtons text="false"/> </td>
      </tr>
    </table>
    <gm:create label="Add a row"/> </td>
  </gm:template>
</gm:page>

In this example, we want to display two columns, title and content, and we want to be able to sort on the title. In the gm:list tag, we specify a gm:sort tag for the title column. The gm:sort tag includes a reference to its data source.

In the gm:template tag, we specify gm:header tags for each of the two columns. The first gm:header tag includes a sort attribute whose value is the name of the gm:sort tag associated with it. When users run the application, they can sort the list by clicking on the first column name.

You can sort on many common types of elements that appear in built-in feeds. For more information on the types of elements you can use in a gm:sort tag, see Preferred Elements.

Filtering Data

When you display a data source in a gm:list tag, you can use the gm:filter tag to narrow the displayed data to entries that pass through the filter. You can specify two kinds of filters, value and range:

• If you specify a string in the value attribute, the filter will allow only entries that exactly match the string.
• If you specify strings in either a min or max attribute, or both, the filter will allow entries that fall inside the given range.

You can filter on many common types of elements that appear in built-in feeds. For more information on the types of elements you can use in a gm:filter tag, see Preferred Elements.

Note that the filtering takes place on the server, before you read data from the feed -- your application never sees data that's filtered out.

Here's a simple example that uses filtering with gm:filter:

<gm:page title="filter" authenticate="true">

  <gm:list id="myList" data="${user}/filterme" template="filterTemplate">
    <gm:filter ref="atom:title" value="danger" />
  </gm:list>

  <gm:template id="filterTemplate">  

    <table>
      <tr>
        <td>Title</td>
        <td>Content</td>
      </tr>

      <tr repeat="true">
        <td> <gm:text ref="atom:title"/> </td>
        <td> <gm:text ref="atom:content"/> </td>
        <td> <gm:editButtons text="false"/> </td>
      </tr>
    </table>

    <gm:create label="Add a row"/>

  </gm:template>

</gm:page>

In this example, we display a two-column list of data from a ${user} feed. In the gm:list tag, we apply a gm:filter that looks for entries that exactly match the word "danger" in the atom:title element. Only entries that match this filter exactly will be displayed. If the user adds new entries to the feed, once they are saved, they must meet the filter criteria in order to be displayed.

Preferred Elements

The following table lists the feed elements that are available for sorting and filtering.

Element path	Description/link to more info
atom:title	title element, as in ${app} and ${user} feeds.
gd:when/@startTime	Event starting time.
gd:when/@endTime	Event ending time.
gd:email/@address	Email address.
gd:email/@label	Descriptive name (e.g. "work", "home") for email address.
gd:where/@label	Descriptive name (e.g. "Kirby Plaza", "main building") for location.
gd:where/@valueString	Primary description of location.
gd:who/@valueString	Name of participant.
gd:who/@email	Participant email address.
gd:rating/@value	Value of a numeric rating.