JS Version 1.4.0 Release

Fixes :bug:

  • Removed Jumpiness on Search loading: VerticalResults no longer flashes while in the ‘search-loading’ state. Now, while a search is loading, the last search’s results will still display on the screen. This addresses the “jumpies” you may have seen when paginating through results.
  • Middle Click Analytics: Added analytics on middle-click for links and CTAs.
  • FilterBox configuration Options: Filterbox’s onChange, resetFilters, resetFiltersLabel, resetFilter, and resetFilterLabel config options were not working. These have been fixed. FilterBox will also now respect a child filter’s specific configuration over its own.

Updates to Existing Features/Components + New Features :tada:

  1. RTF Formatting and Click Analytics! You can now set the target for the html attribute via the ANSWERS.formatRichText(rtfFieldValue, eventOptionsFieldName, target), and tag clicks from your rich text field with analytics. (Previously, you could just format the text as it displayed on the page.) You can learn more about how to use rich text fields in the Rich Text Unit.

  2. Direct Answer Formatting. It’s now easier to format direct answers, using a card component. It can be formatted based on field type, and is overridable by field name. If you’d like to override it, you can do so with the jambo direct answer card command. Learn more in the Formatting Direct Answer Unit.

  3. Pagination can now be configured to show multiple pages at a time, and display the first and last page. Here are the details on teh configuration options

  • You can now display multiple of pages via maxVisiblePagesDesktop and maxVisiblePagesMobile config options, which specify the maximum number of visible pages on both desktop and mobile.
  • Pagination’s showFirst and showLast config options have been deprecated in favor of showFirstAndLastButton.
  • Pagination now accepts an onPaginate(newPageNumber, oldPageNumber, totalPages) callback, which is called when the page is changed. By default this scrolls the user to the top of the page.
  • Here’s an example of the new component with some of the additional configuration options toggled:
  • You can configure these options under Pagination in componentSettings in your json config file. All options are described here, and here’s an example of using the new updated component:
"componentSettings": {
 "Pagination": {
    "maxVisiblePagesMobile": 3,   //display 3 pages on mobile breakpoints & below
    "maxVisiblePagesDesktop": 10,  //display 10 pages on mobile breakpoints & below
    "pageLabel": "" , //hide the label for the page
    "pinFirstAndLastPage": true, // "pin" the first and last page (page 1 and 35 in the above example)
    "showFirstAndLastButton": false //hide the button that skips to the first and last page (represented as the double chevron). 
  1. Applied Filters got lots of fun updates on both Universal and Vertical Search. In summary:
  • VerticalResults now displays static and facet applied filters, in addition to NLP filters, in the applied filters bar.
  • Filters can be hidden on a per fieldId basis using the new appliedFilters.hiddenFields config option. By default, builtin.entityType filters are hidden (but this can be overridden).
  • VerticalResults now accepts an appliedFilters.removable config option to true will render static and facet filters as removable tags, which when clicked will remove the filter and trigger a new search.
  • You can configure these options under the VerticalResults, or UniversalResults in your json config files. All applied filter configuration options are described in the VerticalResults and UniversalResults SDK documentation.
  1. Facets are now searchable (either on a field basis, or for all facets)! You can also override specific configuration options per facet option (including showMore, showCount and expand) More information is included in the Facets SDK documentation. These options can be configured under the Facets component in your json config files. Here’s an example of making an insurance accepted field searchable.
"componentSettings": {
 "Facets": {
    "fields": {
        "insuranceAccepted": {
            "label": "Insurances", // This will change the label of the facet. If not specified, defaults to display name of the field 
            "searchable": true,
            "searchLabelText": "Search for insurance accepted",
            "placeholderText": "Search"       
  1. Maps now accept onPinMouseOver(mapMarker) and onPinMouseOut(mapMarker) callbacks for map pins. These operate similarly to onPinClick(mapMarker). This is mainly for developers who want to add custom map interactions. See SDK Documentation.

  2. Filter by Distance/Radius: You can now add a static filter for distance. You can do this using the existing FilterBox options in your json config file, but adding an optionType for RADIUS_FILTER. Additional information is in the SDK documentation, and here’s an example:

"componentSettings": {
 "FilterBox": {
  "filters": [
      "type": "FilterOptions",
      "label": "DISTANCE",
      "optionType": "RADIUS_FILTER", //needed for this to be a distance filter
      "control": "singleoption", //required
      "options": [{
          "label": "5 miles", 
          "value": 8046.72, //value is in meters
          "label": "10 miles",
           "value": 16093.4, //NEW  
            "label": "25 miles",
            "value": 40233.6, //NEW  
            "label": "50 miles",
            "value": 80467.2,   
            "label": "200 miles",
            "value": 321869,
            "label": "400 miles",
            "value": 643738
  "searchOnChange": true
  1. Overriding Location Users can now call a new method, ANSWERS.setGeolocation(lat, lng), to override any location biasing used in answers.

Breaking Changes in Component Configuration

In the applied filters, by default, builtin.entityType filter is hidden.
Previously, if you had a builtin.entityType filter, you’d see that entity filter displayed:

Now it will not be displayed by default:

This can be overridden if needed via verticalsToConfig – see #4 above.

Other Upgrading Call Outs

As with all upgrades, we recommend putting this on staging before moving to production. There were fairly significant styling changes with this version. A few items that will be affected by the changes listed above are below.

Custom Promotions

If you added special css to any of your universal results sections, you will need to target the new class view all class to hide it.

To address: In your answers.css, add “display: none;” to these class names

.yxt-Results--{VERTICAL_NAME} {
  yxt-Results-viewAll {
    display: none;


This fix was implemented by default as of patch 1.4.1. If you’re reading this, we’d recommend using version 1.4.1 instead.

Now that pagination supports displaying multiple page numbers at one time, we needed an active-page state, to make it clear to the user what page s/he is on. You’ll therefore see a background said active state.

To address: If you’re only displaying one page at a time, you can remove this by adding this to you answers.scss

.yxt-Pagination #active-page {
  background-color: inherit;

Default Icon Color on Universal

To spruce up universal a bit, the default icon color for the section header is now the default primary brand color.
To address: Many experiences are already overriding this color, but if you notice the icon color in the section headers and you are not a fan, add this to your answers.scss

.yxt-Results-titleIconWrapper {
  color: inherit;

View All Link

Some older sites have added a chevron after the view all link by default. This is now built-in (!), so you might see it duplicated:

To address:
In your answers.scss, search for the following text and remove it:

  @include chevron-after('~assets/images/answers/smaller.svg');

Universal Results Applied Filters Bar

We’ve updated the Universal Results applied filters bar to use the same css classes as its Vertical Results counterpart. If you were previously targeting .yxt-Results-filters, you should now target .yxt-ResultsHeader.

To address: Update .yxt-Results-filters to .yxt-ResultsHeader in any custom css.
For example, previously hiding applied filters with this:

.yxt-Results--{VERTICAL_NAME} .yxt-Results-filters
  display: none;

Update .yxt-Results-filters to .yxt-ResultsHeader:

.yxt-Results--{VERTICAL_NAME} .yxt-ResultsHeader
  display: none;

Padding Changes on Applied Filters

We’ve reduced some of the default top and bottom padding on applied filters, in an attempt to reduce the amount of space that pushes the results set down.

Previous Versions:

  • .yxt-ResultsHeader-appliedFilters had top and bottom .5rem padding
  • .yxt-ResultsHeader had top and bottom .5rem padding

This version:

  • .yxt-ResultsHeader-appliedFilters has no padding
  • .yxt-ResultsHeader has top .25rem padding

To address: If you require the old padding,

.yxt-ResultsHeader-appliedFilters, .yxt-ResultsHeader
  padding: .5rem 0;

Universal Results

We added margin-top to all sections of Universal Results, instead of all but the first section, for greater consistency. In the theme’s universal-standard.scss, this was patched with:

  margin-bottom: var(--yxt-base-spacing);

If you dislike the spacing, you can set a different margin-bottom on the class above.

Facets/FilterBox/FilterOptions Have Prettier Checkboxes

Instead of the built-in browser checkbox, we now use ::before and ::after styling on the .yxt-FilterOptions-optionLabel class to make them a little bit prettier.

To address: If you require the old checkboxes

.yxt-FilterOptions-checkboxInput {
  height: inherit;
  width: inherit;
  opacity: inherit;
  margin: inherit;

.yxt-FilterOptions-optionLabel:before {
  content: none;

.yxt-FilterOptions-optionLabel {
  display: block;
  margin-left: .3125rem;

.yxt-FilterOptions-option {
  align-items: center;

Hey @roser

I’m really excited to utilize the new Applied Filters functionality. I’m trying to implement the hiddenFields component to hide the built in keywords field in the Knowledge Graph. I checked the vertical results documentation and want to confirm the following:

For built in profile fields should we be including profile.? For example hiddenFields: "profile.keywords"? Or does hiddenFields:"keywords" work? I’ve tried both examples and am getting errors with both.

Thank you,

Hi @Austin_DaCunha, the name should match the field name you put in your serverside config file, which is also the api name (in this case, if “keywords” ).

The hiddenFields property accepts an array of strings, so it would need to be hiddenFields:['keywords'] – if that doesn’t work, feel free to post your json config file here and we can further troubleshoot. Also note if you are overriding and you’d still like builtin.entityType hidden, you need to include that explicitly, hiddenFields:['keywords', 'builtin.entityType']

Hi @roser

I also am very excited about these updates! I am trying to implement the distance on static filters and having trouble getting it to render and wanted to highlight that you do not have to add anything to the backend for the Distance filter to work. However, I wanted to callout that you do have to add: control field and set it to single or multi option.


thank you for the call out alyssa! updated the example in this post with that information.