Universal Results – Yext Help

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 Results Page doc.

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 Search 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:

https://codesandbox.io/embed/blissful-franklin-3t9o0?codemirror=1&fontsize=13&hidenavigation=1&theme=dark&view=preview

Universal Results 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 reference doc.
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.