Help Center

Menu

Displaying tab-specific faceted navigation

this article applies to Funnelback 15.12 and later.

Background

This article shows how to configure the template to display a different set of facets depending on which tab is currently selected.

Before you start

All the facets must be configured on the frontend service that serves the template. The facet names need to be unique and are referenced when constructing the lists of facets to display.

Process

Step 1 - define a FacetedNavigation macro that takes the list of facets to display as a parameter

Create a faceted navigation macro similar to the one below (which is based on the default faceted navigation template code). The code can be included within your Freemarker template, or in an external Freemarker file that is imported.

<#macro FacetedNavigation facetNames=[]>
    <#if facetNames??>
        <#assign facetList = response.facets />
    <#else>
        <#assign facetList = getFacets(response, facetNames) />
    </#if>

    <#if response.facets?? && response.facets?size gt 0>
    <div class="col-md-3 col-md-pull-9 hidden-print" id="search-facets">
        <h2 class="sr-only">Refine</h2>
        <#list facetList as facet>
            <#if facet.allValues?size gt 0 && facet.guessedDisplayType != "TAB">
            <div class="facet">
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="facetLabel">${facet.name!}</span></div>
                    <div class="panel-body">
                        <ul class="list-unstyled">
                            <#list facet.allValues as value>
                                <#assign isDisabled = value.count?? && value.count lt 1 && !value.selected />
                                <li>
                                    <span class="categoryName">
                                        <a ${(value.selected)?then('selected-' + facet.guessedDisplayType?lower_case, '')} ${isDisabled?then('disabled', '')}" href="${isDisabled?then('#', value.toggleUrl)}" title="${(value.selected)?then('Remove', 'Refine by')} '${facet.name}: ${value.label}'">
                                        <#if facet.guessedDisplayType == 'RADIO_BUTTON'>
                                            <span class="${value.selected?then('glyphicon glyphicon-record', 'radio-unchecked')}"></span>
                                            <span class="hidden"><#noescape>${value.selected?then('&#128280;', '&#9711;')}</#noescape></span><#-- Fall back to Unicode chars if bootstrap is unavailable -->
                                        <#elseif facet.guessedDisplayType == 'CHECKBOX'>
                                            <span class="glyphicon glyphicon-${value.selected?then('check', 'unchecked')}"></span>
                                            <span class="hidden"><#noescape>${value.selected?then('&#9745;', '&#9744;')}</#noescape></span><#-- Fall back to Unicode chars if bootstrap is unavailable -->
                                        <#elseif value.selected>
                                            <#if facet.guessedDisplayType == "SINGLE_DRILL_DOWN" && value?counter != 1><span style="margin-left: ${(value?counter - 1) * 10}px">&#8627;</span></#if>
                                                <small class="glyphicon glyphicon-remove"></small>
                                                <small class="hidden">&#10060;</small><#-- Fall back to Unicode chars if bootstrap is unavailable -->
                                        </#if>
                                        ${value.label}
                                        </a>
                                    </span>
                                    <#if value.count?? && !value.selected>&nbsp;<span class="badge pull-right"><span class="categoryCount">${value.count}</span></span></#if>
                                </li>
                            </#list>
                        </ul>
                        <button type="button" class="btn btn-link btn-sm search-toggle-more-categories" style="display: none;" data-more="More&hellip;" data-less="Less&hellip;" data-state="more" title="Show more categories from this facet"><small class="glyphicon glyphicon-plus"></small>&nbsp;<span>More&hellip;</span></button>
                    </div>
                </div>
            </div>
            </#if>
        </#list>
    </div>
    </#if>
</#macro>

Step 2 - add template code to display the tabs and also determine the selected tab

The code below is the default template code for displaying the tabs, with an additional line to track the currently selected tab.

<#-- Display tabbed faceted navigation -->
<#if response.facets??>
  <#list response.facets as facet>
    <#if facet.allValues?size gt 0 && facet.guessedDisplayType == "TAB">
    <div class="col-lg-12">
        <ul class="nav nav-tabs">
            <#list facet.allValues as value>
            <li role="presentation" class="nav-item">
                <a href="<#if (value.count?? && value.count lt 1)>#<#else>${value.toggleUrl}</#if>" title="Show only '${value.label}'" class="nav-link ${(value.count?? && value.count lt 1)?then('disabled', '')} ${value.selected?then('active', '')}">${value.label}<#if value.count??> (${value.count})</#if></a>
            </li>

            <#-- Set the selected tab variable (required below for determining the conditional facets to display) -->
            <#if value.selected><#assign selectedTab = value.label/></#if>
            </#list>
        </ul>
        <br/>
    </div>
    </#if>
  </#list>
</#if>

Step 3 - create conditional code to define the list of facets to display

Create a switch statement that sets the facet list per tab. selectedTab was set when iterating over the tabs in the previous step.

<#-- Use similar code to define the facets that should be displayed based on the selected tab -->
<#switch selectedTab>
    <#case "All results">
        <#assign facets_list=["Portfolio","Functions","Type of Body","Classification","Type","Created date"]>
    <#break>
    <#case "Government Departments and Agencies">
        <#assign facets_list=["Portfolio","Functions","Type of Body","Created date"]>
    <#break>
    <#case "Boards and other structures">
        <#assign facets_list=["Portfolio","Board function","Type","Type of Body","Created date"]>
    <#break>
    <#case "People">
        <#assign facets_list=["Role belongs to","Position","Type"]>
    <#break>
    <#case "Enquiry lines">
        <#assign facets_list=[""]>
    <#break>
</#switch>

<#-- Display the faceted navigation -->
<@FacetedNavigation facetNames=facets_list />

This should result in the facets displayed being conditional based on the currently selected tab. See the faceted navigation showcase demo for an example of this in action.