Display Search Results

Introduction

Search results are the focus of every search interface, and Appkit makes it easy to forge the results precisely to your liking.

Result Lists

To add a list of results containing every available field, use the self-closing Result List tag:

<search:resultList response="${response}" />

To choose which fields are displayed, add the Result tag inside the body of the Result List tag:

<search:resultList response="${response}">
    <search:result>
        ...
    </search:result>
</search:resultList>

Working with fields

Inside the Result tag, use the Field tag to specify and configure each field:

<search:resultList response="${response}">
    <search:result>

        <search:field fieldName="title" />
        <search:field fieldName="description" />

    </search:result>
</search:resultList>

Result tag

The Result tag renders if results are available. It outputs a single result, and must be nested within a Result List tag. The No Results tag renders if no results are available.

Usage

One of the primary uses of the result tag is to add a CSS class to each search result item. Not only does the tag provide cssClass and addCssClass parameters for adding a static class to all search results, but it can also accept run-time values through the addDynamicCssClass parameter. For example, you could set addDynamicCssClass="${result.fields.type}" to add a CSS class indicating the type of each result, enabling you to apply custom styles to each type of result.

<search:resultList response="${response}">
    <search:result addDynamicCssClass="${result.fields.type}">
        <search:field fieldName="title" />
        <search:field fieldName="description" />
    </search:result>
</search:resultList>

Conditional result tag

It is also possible to use the result tag to conditionally display a set of fields based on the value of a given field. This is useful when each result fit into a specific category.

Usage

The syntax is as follows:

<search:resultList response="${response}">
    <search:result a-field-name="fieldValue">
        <search:field fieldName="title" />
        <search:field fieldName="description" />
    </search:result>
    <search:result a-field-name="otherFieldValue">
        <search:field fieldName="otherTitle" />
        <search:field fieldName="otherDescription" />
    </search:result>
</search:resultList>

For example, if you had 2 types of results, documents and people, with different fields, you could display them in a single result list as follows:

<search:resultList response="${response}">
    <search:result type="people">
        <search:field fieldName="name" />
        <search:field fieldName="date-of-birth" />
    </search:result>
    <search:result fieldName="document">
        <search:field fieldName="title" />
        <search:field fieldName="author" />
    </search:result>
</search:resultList>

It is also possible to combine multiple conditions. All have to be met for the specific <search:result> tag to be selected. For example:

<search:resultList response="${response}">
    <search:result type="people" country="Vietnam">
        <h1>Vietnam</h1>
        <search:field fieldName="name" />
        <search:field fieldName="date-of-birth" />
    </search:result>
    <search:result type="people">
        <h1>Rest of the World</h1>
        <search:field fieldName="name" />
        <search:field fieldName="date-of-birth" />
    </search:result>
</search:resultList>

No Results tag

The No Results tag renders if no results are available. It is nested within a Result List tag.

Usage

When placed within a Result List tag any elements in the body of the noResults tag will only be rendered when the platform returns zero results:

<search:resultList response="${response}">
    <search:result addDynamicCssClass="${result.fields.type}">
        ...
    </search:result>
    <search:noResults>
        Only shown when Response has zero results!
    </search:noResults>
</search:resultList>

This tag requires no further attributes.