Result Templates
Result templates determine the format of the individual query results in a search interface.
In Headless, a ResultTemplate
is an object that specifies the content of a template as well as a list of conditions to fulfill for that template to be selected for any given result.
EXAMPLE
import { ResultTemplate, Result } from "@coveo/headless";
import React from "React"
const myResultTemplate: ResultTemplate = {
content: (result: Result) => (<div>{result.title}</div>),
conditions: [(result: Result) => {
return !!result.title;
}]
}
Headless lets you create and manage templates with its ResultTemplatesManager
class.
To use the ResultTemplatesManager
, you must instantiate it and register result templates before a query is executed.
When you render results, you can then call on the manager to select the most appropriate template for that result.
The following example code shows a basic use case of the ResultTemplatesManager
.
import { buildResultTemplatesManager,
ResultTemplatesManager,
Result,
ResultTemplatesHelpers } from "@coveo/headless";
import { headlessEngine } from "../Engine";
// ...
export default class ResultList {
// ...
private headlessResultTemplatesManager: ResultTemplatesManager;
// ...
constructor(props: any) {
// ...
this.headlessResultTemplatesManager =
buildResultTemplatesManager(headlessEngine); (1)
this.headlessResultTemplatesManager.registerTemplates( (2)
{
conditions: [], (3)
content: (result: Result) => (
<li>
<h4>{result.title}</h4>
<p>{result.excerpt}</p>
</li>
)
},
{
conditions: [
ResultTemplatesHelpers.fieldMustMatch("source", ["Techzample"])], (4)
content: (result: Result) => (
<li>
<h4>Techzample: {result.title}</h4>
<p>{result.excerpt}</p>
</li>
),
priority: 1 (5)
}
);
// ...
}
// ...
render() {
return (
<ul>
{this.state.results.map((result: Result) => {
const template =
this.headlessResultTemplatesManager.selectTemplate(result); (6)
return template(result);
})}
</ul>
);
}
}
1 | Instantiates a new ResultTemplatesManager . |
2 | Registers templates on your ResultTemplatesManager .
You can pass multiple templates as separate parameters, or call registerTemplates multiple times. |
3 | Results will always satisfy this template’s conditions because there are none, making this the default template. |
4 | Headless offers result template helpers to make it easier to define conditions. See the reference documentation. |
5 | Sets the priority of the result template. If multiple templates' conditions are satisfied by a given result, the template with the highest priority will be selected. If multiple templates have equal priority, the first template registered will win out. |
6 | Selects the most appropriate result template for the given result. |
Recommended Articles