loading

UniversalResults

Background

The UniversalResults component renders a set of verticals. Each vertical is rendered as a section. Each section includes a list of results, where each result is rendered as a card. Visually, there are lots of similarities between each vertical section and the Vertical Results component. That’s because, under the hood, Universal Results uses Vertical Results component to render the sections and their results.

To learn more about how to design a full Universal Results pages, check out the Universal Search Results.

The Configuration Object

The bulk of the Universal Results work is specifying the configuration for each vertical, under the larger config object. All verticals that are specified in the backend Answers configuration will be displayed using the default standard card (even if the config is not specified, or if a vertical is not included in said config).

Configuration

Here is an example configuration for UniversalResults.

ANSWERS.addComponent('UniversalResults', {
  container: '.universal-results-container',
  appliedFilters: {
    show: true,
    showFieldNames: false,
    hiddenFields: ['builtin.entityType'],
    resultsCountSeparator: '|',
    showChangeFilters: false,
    changeFiltersText: 'change filters',
    delimiter: '|',
    labelText: 'Filters applied to this search:',
  },
  config: {
    people: { // The verticalKey
      title: 'People',
      icon: 'star',
      url: 'people.html',
      viewMore: true,
      viewMoreLabel: 'View More!',
      showResultCount: true,
      includeMap: true,
      mapConfig: {
        mapProvider: 'google',
        apiKey: '<<< enter your api key here >>>',
      },
      
    }
  },
})

Example

Here is a fully working example:

UniversalResults API
Property Type Default Description
appliedFilters
object
Settings for the applied filters bar in the results header. These settings can be overriden in the “config” option below on a per-vertical basis.
show
boolean
true
If true, show any applied filters that were applied to the universal search.
showFieldNames
boolean
If appliedFilters.show is true, whether to display the field name of an applied filter, e.g. “Location - Virginia” vs just “Virginia”.
hiddenFields
array
['builtin.entityType']
If appliedFilters.show is true, this is list of filters that should not be displayed.
resultsCountSeparator
string
|
The character that separates the count of results (e.g. “1-6”) from the applied filter bar.
showChangeFilters
boolean
Whether to display the change filters link that links out to the vertical search.
changeFiltersText
string
change filters
If showChangeFilters is true, the text for the change filters link.
delimiter
string
|
The character that separates each field (and its associated filters) within the applied filter bar.
labelText
string
Filters applied to this search:
The aria-label given to the applied filters bar.
config
object
configuration for each vertical’s results. Each property is nested under the verticalKey.
card
object
Standard
The card used to display each individual result, see Result Cards.
template
string
A custom Handlebars template for this section
title
string
The vertical key
The title of the vertical, displayed in the section heading.
icon
string
star
Icon to display to the left of the title. Must be one of the SDK’s built-in icons
url
string
VERTICAL_KEY.html
The url for both the viewMore link and the change-filters link. The VERTICAL_KEY used in the default is the key in the config object.
viewMore
boolean
true
Whether to display a view more link at the bottom of the universal results section for this vertical. Url, or the verticalPages.url initialization option must be populated. See more on verticalPages here.
viewMoreLabel
string
View More
The text for the view more link, if viewMore is true.
appliedFilters
object
Same as appliedFilters settings above. Settings specified here will override any top level settings.
show
boolean
true
If true, show any applied filters that were applied to the universal search.
showFieldNames
boolean
If appliedFilters.show is true, whether to display the field name of an applied filter, e.g. “Location - Virginia” vs just “Virginia”.
hiddenFields
array
['builtin.entityType']
If appliedFilters.show is true, this is list of filters that should not be displayed.
resultsCountSeparator
string
|
The character that separates the count of results (e.g. “1-6”) from the applied filter bar.
showChangeFilters
boolean
Whether to display the change filters link that links out to the vertical search.
changeFiltersText
string
change filters
If showChangeFilters is true, the text for the change filters link.
delimiter
string
|
The character that separates each field (and its associated filters) within the applied filter bar.
labelText
string
Filters applied to this search:
The aria-label given to the applied filters bar.
useAccordion
boolean
DEPRECATED Use the accordion card instead. Whether to use the AccordionResults component instead of VerticalResults for this vertical.
includeMap
boolean
Whether to include a map in this vertical results section.
mapConfig
object
Configuration for the map. If includeMap is true, this is required. Additional configuration for this object described in the Map Component documentation.
mapProvider
string
REQUIRED Either ‘mapbox’ or ‘google’, not case sensitive
apiKey
string
REQUIRED API key for the map provider
viewAllText
string
DEPRECATED Use viewMoreLabel instead. viewAllText is a synonym for viewMoreLabel, where viewMoreLabel takes precedence over viewAllText.