Changing the Default 'All' Tab to Another Category in Faceted Search

Ramya V
Kilo Sage

Changing the Default 'All' Tab to Another Category in Faceted Search

Prerequisites

Before proceeding, identify the t value for the "Case" category in the faceted search. To do this:

  1. Click on the "Case" category in the faceted search.
  2. Check the URL format. For example, if modifying the Faceted Search for the CSM Portal, clicking on the "Case" category changes the URL to: https://<instance_name>.service-now.com/csm?id=search&spa=1&t=case

Here, the value of t is "case".

RamyaV_0-1741248172610.png

    3. Similarly, determine the t value for "Incidents."

Procedure

Step 1: Clone the OOTB Faceted Search Widget

To modify the default tab behavior, you need to clone the Out-of-the-Box (OOTB) Faceted Search widget.

Step 2: Modify the Server-Side Script

In the cloned widget, update the server-side script to modify the default behavior.

OOTB Script:

By default, the script behaves as follows:

if (data.t) {

    data.t_label = data.searchSources[data.t].name;

} else {

    data.t_label = gs.getMessage("All");

}

Explanation:

  • The data.t_label variable stores the display name of the current tab (or search source).
  • If t is specified, it takes the tab name from data.searchSources[data.t].name.
  • If t is not specified, it defaults to "All".

Since t is not explicitly set in the default script, the system defaults to the "All" tab.

Modified Script:

Update the script to ensure that when no results are found for a query (q), the system defaults to the "Case" tab instead of "All."

(function() {

    var portalRecord = $sp.getPortalRecord();

    data.aisEnabled = $sp.isAISearchEnabled();

    data.facetTitle = options.facet_list_title ? gs.getMessage(options.facet_list_title) : gs.getMessage('Filters');

    data.SEARCH_RESULTS = gs.getMessage('Search Results');

    data.resultFilterMsg = gs.getMessage('filtered result returned');

    data.noResultsMsg = gs.getMessage('no results returned');

    data.resultsFilterMsg = gs.getMessage('filtered results returned');

    data.resultUnFilterMsg = gs.getMessage('unfiltered result returned');

    data.resultsUnFilterMsg = gs.getMessage('unfiltered results returned');

    data.paginationMsg = gs.getMessage('load more results below');

    data.limitMsg = gs.getMessage("results are being limited, try using filters or more specific keywords");

    data.isMobile = gs.isMobile();

 

    // Get the search query and tab

    data.q = $sp.getParameter('q');

    data.t = $sp.getParameter('t') || 'all';  // Default to 'all' if t is not set

 

    // If a search query is provided, check for results

    if (data.q) {

        var searchResults = performSearch(data.q);  // Simulated search function to get results for 'q'

        if (!searchResults || searchResults.length === 0) {

            // If no results found, default to 'case' tab and show "no results found" message

            data.t = 'case';

            data.noResultsMsg = gs.getMessage('No results found for the search term: ') + data.q;

        } else {

            // If results exist, use the specified tab

            data.t_label = data.searchSources[data.t] ? data.searchSources[data.t].name : gs.getMessage("All");

        }

    }

 

    // Configure search sources

    data.searchSources = {};

    data.resultTemplates = {};

    data.searchSourceConfiguration = {};

 

    options.refresh_page_on_search_submission = false;

    data.typeaheadSearchWidget = $sp.getWidget('typeahead-search', options);

    data.breadcrumbsWidget = $sp.getWidget('breadcrumbs');

    data.limit_group = options.max_group || 15;

    data.limit_all = options.max_all || 30;

    data.showTypeaheadSearch = options.show_typeahead_search == "true";

    data.portalID = $sp.getPortalRecord().getUniqueValue();

    data.isLocationTrackerDisabled = gs.getProperty('glide.service_portal.disable_location_tracker');

 

    var portalID = $sp.getPortalRecord().getUniqueValue();

    var searchSources = $sp.getSearchSources(portalID);

    var i = 0;

    searchSources.forEach(function(searchSource) {

        data.resultTemplates["sp-search-source-" + searchSource.id + ".html"] = $sp.translateTemplate(searchSource.template);

        data.searchSources[searchSource.id] = {

            name: searchSource.name,

            id: searchSource.id,

            order: i++

        };

        data.searchSourceConfiguration[searchSource.id] = searchSource.sys_id;

    });

 

    // Set the label for the active tab

    if (data.t === 'case') {

        data.t_label = gs.getMessage("Case");

    } else if (data.t === 'all') {

        data.t_label = gs.getMessage("All");

    }

 

    // Function to simulate a search for 'q'

    function performSearch(query) {

        // Placeholder for actual search logic (this is a simulation)

        var results = [];  // Simulating no results found

        return results;  // Simulate no results found

    }

})();

**Highlighted the code changes**

Step 3: Update the Page Designer

  1. Navigate to the Page Designer.
  2. Remove the OOTB Faceted Search Widget.
  3. Replace it with the cloned and modified widget.

Expected Results

Scenario 1: When searching for "email" (q = email)

  • The search executes and returns relevant results.

RamyaV_1-1741248172619.png

 

Scenario 2: When searching for "house" (q = house)

  • No matching results are found.
  • The system defaults to the "Case" tab instead of "All".
  • A message appears: "No results found for the search term: house".

RamyaV_2-1741248172625.png

 

0 REPLIES 0