How do I make a yes/no field facet render as a single checkbox instead of two checkboxes?

1

Is there a config setting to do this or do I need to override the Facet template?

What happens by default:
Screen Shot 2021-01-22 at 10.20.25 AM

What we want to happen:
Screen Shot 2021-01-22 at 10.20.04 AM

2

Hi Mcgin,

You’d need to override the Facets component’s onMount to do this.

In other words, you’d shadow the facets partial (templates/vertical-standard/script/facets.hbs) and add an onMountOverride. Here’s an example using said attribute to change the option labels, but you could remove an option from displaying in a similar fashion:

You’d add lines 112 - 167 to the partial.

Note that if you have collapsible filters, you’'ll also need to move that logic into the onMountOverride. Your partial will look something like this:

ANSWERS.addComponent('Facets', {
  container: '#js-answersFacets',
  {{#if verticalKey}}
    verticalKey: "{{{verticalKey}}}",
  {{/if}}
  onMountOverride: function (data) {
    if (typeof IS_COLLAPSIBLE_FILTERS !== 'undefined') {
      facetsDecorator.onMount(this);
    }
    this.core.enableDynamicFilters();
    if (this._filterbox) {
      this._filterbox.remove();
    }
    let { filters, resultsContext } = this._state.get();

    if (!filters || resultsContext === "no-results") {
      return;
    }

    filters = filters.map(f => {
      console.log(f)
      //put your field ID here
      if (f.fieldId == "acceptingNewPatients") {
        options = f.options;
        options.forEach(o => {
          if (o.label == "false") { o.label = "Is Not Accepting Patients"} //set the false label
          if (o.label == "true") { o.label = "Accepting New Patients"} //set the true label
        });
      }
      const fieldOverrides = this.config.fields[f.fieldId] || {};
      return Object.assign({}, f, {
        type: 'FilterOptions',
        control: this.config.fieldControls[f.fieldId] || 'multioption',
        searchable: this.config.searchable,
        searchLabelText: this.config.searchLabelText,
        placeholderText: this.config.placeholderText,
        showExpand: fieldOverrides.expand === undefined ? this.config.expand : fieldOverrides.expand,
        ...fieldOverrides
      });
    });

    this._filterbox = this.componentManager.create(
      'FilterBox',
      Object.assign({}, this.config, {
        parentContainer: this._container,
        name: `${this.name}.filterbox`,
        container: '.js-yxt-Facets',
        verticalKey: this._verticalKey,
        resetFilter: this.config.resetFacet,
        resetFilters: this.config.resetFacets,
        resetFilterLabel: this.config.resetFacetLabel,
        resetFiltersLabel: this.config.resetFacetsLabel,
        isDynamic: true,
        filters
      })
    );

    this._filterbox.mount();
    this.core.globalStorage.set("facets-loaded", true);
  },
  {{!-- onMount: function() {
    if (typeof IS_COLLAPSIBLE_FILTERS !== 'undefined') {
      facetsDecorator.onMount(this);
    }
  }, --}}
  ...{{{ json componentSettings.Facets }}},
    
});

Let us know how it works for you! An easier way to accomplish this is planned for an upcoming release.

Thanks,
Rose

3 Likes
3

Hi!

Thanks for this post, @roser ! Very helpful. I was wondering if the update has been released to make this change more easily.

Thanks,
Sherman