User Interface Components

TwigKit encapsulates the design patterns of search into reusable, configurable UI components.

Search Results & Fields

Search is all about results. TwigKit makes laying out search results and formatting fields easier than ever.

<search:resultList>

   <search:field
      fieldName="title" />

   <search:field
      fieldName="summary"
      maxCharacters="500" />

   <search:field
      fieldName="date"
      dateFormat="relative" />

</search:resultList>

Structured Results

Specify which fields you want to show in the search results, and exactly how they should appear. Each field can be highly configured and even localised.

<search:field
   fieldName="subject"
   addCssClass="hierarchy" />

Predefined Styles

Take advantage of predefined styles to present multi-value fields as capsules, tags, or a hierarchy.

<search:field
   fieldName="keywords"
   query="${query}"
   addCssClass="capsule" />

Clickable Metadata

Search is an iterative process. Help users easily refine their query by making metadata clickable. Just add the query attribute to the field tag.

<widget:image
	src="${imageUrl}"
	width="80"
	height="60"
	alt="${title}" />

Dynamically-resized Images

Images are dynamically resized server-side for optimal bandwidth and browser performance. (The thumbnails are even cached on the server.)

Faceted Navigation

Give users insight into the shape of the results and help them refine their query with faceted navigation.

<widget:facets
   response="${response}"
   query="${query}"
   facetNames="Genres" />

Static

Implement what Peter Morville calls "the most significant search innovation of the past decade" with just one line of markup.

<widget:facets
   response="${response}"
   query="${query}"
   facetNames="Genres,People"
   mode="expandable"
   numberInShortView="5"
   numberInExpandedView="12" />

Expandable

Show a few top filters from each facet and allow users to view additional filters with an additional click.

<widget:facets
   response="${response}"
   query="${query}"
   facetNames="Media"
   separator="/" />

Hierarchical

Displaying hierarchical filters like taxonomies is just as simple (though perhaps not suited for every application).

<widget:facets
   response="${response}"
   query="${query}"
   facetNames="Dates" />

Native Date Support

Human-friendly date formatting with good out-of-the-box default filters.

Charts & Graphs

Bring the data to life with rich visualisations. Turn any facet into a chart with just a single line of code.

<widget:tagcloud
   query="${query}"
   facet="${response.facets.genre}" />

HTML Bar Chart

Easily styled with CSS, the HTML Bar Chart is accessible and easy to use.

<widget:chart
   response="${response}"
   query="${query}"
   type="pie"
   facetName="Genre" />

JavaScript Charts & Graphs

TwigKit supports JavaScript graphing libraries which provide interactive line, spline, area, areaspline, column, bar, pie and scatter charts.

<widget:map
   address="${address}"
   zoomLevel="13"
   width="280px"
   height="280px" />

Mapping

Plot any address on a map using either Google or Bing maps.

Everything Else

TwigKit includes components for doing everything search, ensuring a great result with minimal effort.

<widget:searchForm
   query="${query}"
   completionService="static" />

Autocomplete

<search:breadcrumbs
   response="${response}"
   addCssClass="capsules" />

Breadcrumbs

<search:sort
   query="${query}"
   fields="Date,Title"
   defaultLabel="Relevancy"
   title="Sort by:" />

Sorting

<search:fixedFilters
   platform="${platform}"
   response="${response}"
   query="${query}"
   facet="${response.facets.type}"
   filters="Books,Movies,Music"
   allLabel="Everything" />

Tabbed Filters

<widget:spellingSuggestions
   response="${response}" />

Spelling Suggestions

<widget:resultCountToggle
   query="${query}" />

Results Per Page

<search:pagination
   response="${response}"
   maximumNumberOfPages="5" />

Pagination

<widget:facets
   response="${response}"
   query="${query}"
   facetNames="Categories,Sources"
   enableExclude="true" />