Custom widget: Taxonomy Topic Content - Selecting Filter dropdown loading same thing in all dropdown

vDev · ‎09-07-2023

Hi All,
I am building a custom widget where if I click on browse all under a taxonomy topic, it will display ALL the subtopics and its connected item (be it kb / catalog) on the same page.
For this, I am looping through all the sub-topics under a topic and getting its content, here is the modified Topic Content widget code for the same.

HTML

<div class="topic_container" ng-repeat="topic in data.subTopics">
<div class="heading_sort_filter"><br>
<h2 class="topic_heading">{{topic.name}}</h2>
<div class="box-header-title p-v-2">

<div ng-if="!data.isMobileApp" class="title-item-filters"
ng-class="{'item-fitlers-disable': (contentItems.length === 0 && data.filterBy ==='')}">
<div class="flex-mobile m-r-auto" ng-if="isSearchModeEnabled">
<label class="label-padding" for="filter_picker_select">${Filter by}</label>
<select id="filter_picker_select"
ng-disabled="contentItems.length === 0 && data.filterBy ===''"
class="form-control"
name="filter_picker_select"
ng-model="data.aisFilterBy"
title="${Filter by}"
ng-change="getUpdatedContent()"
aria-label="${Filter by}"
ng-options="item.sysId as item.name for item in aisFilterOptions" />
</div>

<div class="flex-mobile m-r-auto" ng-if="!isSearchModeEnabled">
<label class="label-padding" for="filter_picker_select">${Filter by}</label>
<select id="filter_picker_select_{{topic.name}}"
ng-disabled="contentItems.length === 0 && data.filterBy ===''"
class="form-control"
name="filter_picker_select_{{topic.name}}"
ng-model="data.filterBy"
title="${Filter by}"
ng-change="getUpdatedContent()"
aria-label="${Filter by}"
ng-options="item.sysId as item.name for item in data.filterOptions | filter:filterSubTopics('{{topic.sys_id}}')" />
</div>



<div class="flex-mobile filter-search">
<div class="flex-mobile" ng-if="isSearchModeEnabled" ng-class="{'filter-padding' : !data.aisEnabledUtah}">
<label class="label-padding" for="sort_picker_select">${Sort by}</label>
<select id="sort_picker_select" class="form-control"
ng-disabled="contentItems.length === 0 && data.filterBy ===''" name="sort_picker_select"
ng-model="data.aisSortBy" ng-change="getUpdatedContent()"
ng-options="item.id as item.name for item in aisSortOptions" />
</div>
<div class="flex-mobile" ng-if="!isSearchModeEnabled"
ng-class="{'filter-padding' : !data.aisEnabledUtah}">
<label class="label-padding" for="sort_picker_select">${Sort by}</label>
<select id="sort_picker_select" class="form-control"
ng-disabled="contentItems.length === 0 && data.filterBy ===''" name="sort_picker_select"
ng-model="data.sortBy" ng-change="getUpdatedContent()"
ng-options="item.id as item.name for item in data.sortOptions" />
</div>
<div ng-if="data.aisEnabledUtah">
<widget id="ais_topic_search" options='data.searchWidgetInitOptions'>
</widget>
</div>
<div class="view-controls" ng-if="!data.isMobile">
<div class="pull-right padder-t-sm text-lg toggle" role="radiogroup" aria-label="${Select a view}">
<i id="tab-card" ng-disabled="contentItems.length === 0 && data.filterBy ===''" class="fa fa-th"
ng-click="changeView('card')" ng-keydown="switchTab($event)"
ng-class="{'active' : data.view == 'card'}" title="${Card View}"
data-toggle="{{!isTouchDevice() ? 'tooltip' : undefined}}" data-placement="top"
data-container="body" aria-label="${Card View}"
ng-attr-aria-controls="{{data.view == 'card' ? 'tabpanel-card-' + (data.sys_id ? data.sys_id : '') : undefined}}"
tabindex="{{data.view == 'card' && contentItems.length != 0 ? '0' : '-1'}}" role="radio"
aria-checked="{{data.view == 'card'}}"></i>
<i id="tab-list" ng-disabled="contentItems.length === 0 && data.filterBy ===''" class="fa fa-list-ul"
ng-click="changeView('list')" ng-keydown="switchTab($event)"
ng-class="{'active' : data.view == 'list'}" title="${List View}"
data-toggle="{{!isTouchDevice() ? 'tooltip' : undefined}}" data-placement="top"
data-container="body" aria-label="${List View}"
ng-attr-aria-controls="{{ data.view == 'list' || data.isMobileApp ? 'tabpanel-list-' + (data.sys_id ? data.sys_id : '') : undefined}}"
tabindex="{{data.view == 'list' && contentItems.length != 0 ? '0' : '-1'}}" role="radio"
aria-checked="{{data.view == 'list'}}"></i>
</div>
</div>
</div>
</div>

<div class="flex-mobile form-inline" ng-if="!isSearchModeEnabled">
<label class="aisearch-mobile-weight" for="filter_picker_select">${Filter by}</label>
<select id="filter_picker_select" ng-disabled="contentItems.length === 0 && data.filterBy ===''"
class="sn-select-basic full-width-drop-down" name="filter_picker_select" ng-model="data.filterBy"
title="${Filter by}" ng-change="getUpdatedContent()" aria-label="${Filter by}">
<option ng-repeat="item in data.filterOptions" value={{::item.sysId}}>{{::item.name}}</option>
</select>
</div>

<div class="flex-mobile form-inline" ng-if="isSearchModeEnabled">
<label class="aisearch-mobile-weight" for="filter_picker_select">${Filter by}</label>
<select id="filter_picker_select" ng-disabled="contentItems.length === 0 && data.filterBy ===''"
class="sn-select-basic full-width-drop-down" name="filter_picker_select" ng-model="data.aisFilterBy"
title="${Filter by}" ng-change="getUpdatedContent()" aria-label="${Filter by}">
<option ng-repeat="item in aisFilterOptions" value={{::item.sysId}}>{{::item.name}}</option>
</select>
</div>

</select>
</div>

<div class="flex-mobile form-inline" ng-if="!isSearchModeEnabled">
<label class="aisearch-mobile-weight" for="sort_picker_select">${Sort by}</label>
<select id="sort_picker_select" class="sn-select-basic full-width-drop-down"
ng-disabled="contentItems.length === 0 && data.filterBy ===''" name="sort_picker_select"
ng-model="data.sortBy" ng-change="getUpdatedContent()">
<option ng-repeat="item in data.sortOptions" value={{::item.id}}>{{::item.name}}</option>
</select>
</div>
<div ng-if="data.aisEnabledUtahMobile && contentItems.length > 0" class="aiseach-mobile-padding">
<widget id="ais_topic_search" options='data.searchWidgetInitOptions'>
</widget>
</div>
</div>
</div>
</div>

<div class="box-header-title spellcheck-container"
ng-class="{'aiseach-mobile-spellcheck-adjust': data.isMobileApp}" ng-if="isSearchModeEnabled"
aria-live="polite">
<div class="search-results-container" ng-if="searchedTerm && spellCorrectedTerm && !loading">
<div ng-if="spellCorrectedTerm && !data.isMobileApp">${Showing results for}<button class="btn-link"
ng-click="handleCorrectedSearch(spellCorrectedTerm, 'spell-corrected-term')">{{spellCorrectedTerm}}</button>
</div>
<div ng-if="searchedTerm && !data.isMobileApp">${Search instead for}<button class="btn-link"
ng-click="handleCorrectedSearch(searchedTerm, 'search-term')">{{searchedTerm}}</button></div>
</div>
<div ng-if="!data.isMobileApp" class="clear-search-container">
<button class="btn btn-link" ng-click="clearSearch()">{{::data.clearSearchBtn}}</button>
</div>
<i ng-if="data.isMobileApp" ng-click="clearSearch()" class="fa fa-times-circle fa-lg aisearch-reset-blend"
aria-label="${Reset Search}"></i>
</div>

<span ng-if="!loading && isSearchModeEnabled" class="sr-only" aria-live="polite">{{noOfNewItems}} ${new items
available}</span>
<span ng-if="loading && isSearchModeEnabled" class="sr-only" aria-live="polite">${Loading new items}</span>
<div
id="{{ data.view == 'list' || data.isMobileApp ? 'tabpanel-list-' + data.sys_id : 'tabpanel-card-' + data.sys_id }}"
class="grid-margin"
ng-class="data.view == 'list' || data.isMobileApp ? 'list-view-block': 'grid-test-auto-wrap'">
<div ng-if="!loading || data.action ==='show-more' || data.action === 'modify-ais-results'"
class="flex-item-card" ng-class="data.view == 'list' ? 'list-view': ''"
ng-repeat="item in getContentItems('{{data.filterBy}}'); track by item.sys_id" on-finish-repeat="ngRepeatFinishedContentCards">
<span ng-if="isSearchModeEnabled" class="sr-only">${Item {{$index + 1}} of {{aisContentItems.length}},
}</span>
<span ng-if="!isSearchModeEnabled" class="sr-only">${Item {{$index + 1}} of {{data.content.length}}, }</span>
<div class="flex-display">
<sp-widget widget="item.widgetData"></sp-widget>
</div>
</div>
<div ng-if="loading" class="flex-item-card skeleton-loading" ng-class="data.view == 'list' ? 'list-view': ''"
ng-repeat="item in [1,2,3,4]">
<span class="skeleton-loader badge-loader"></span>
<div class="flex-column text-items">
<div class="skeleton-loader title-loader"></div>
<div class="skeleton-loader description-loader"></div>
<div class="skeleton-loader additional-info-loader"></div>
<div class="empty"></div>
</div>
</div>
</div>
<div ng-if="!isSearchModeEnabled">
<div class="content-align-center" ng-if="data.filterBy !=='' && contentItems.length === 0">
<img src="5c50c822c3e930102ec1a589a840dd7b.iix" />
<p ng-bind-html="data.noContentMessage">
</p>
<p>
${Try another search or remove some filters.}
</p>
</div>
<div class="content-align-center"
ng-if="(!data.isMobileApp && contentItems.length === 0 && data.filterBy ==='')">
<img src="5c50c822c3e930102ec1a589a840dd7b.iix" />
<p>
${No content available}
</p>
</div>
<div class="content-align-center" ng-if="(data.isMobileApp && contentItems.length === 0 && data.filterBy ==='')"
ng-bind-html="data.mobileNoContentMessage" />
<div ng-if="data.showMore">
<button class="btn btn-default btn-loadmore" ng-click="loadMore()" ng-keydown="loadMoreKeydown($event)">
{{data.showMoreMsg}}
</button>
</div>
</div>

</div>
<div ng-if="aisContentItems.length === 0 && !loading" class="content-align-center search-no-results-container">
<i ng-if="!data.isMobileApp" class="fa fa-search"></i>
<img ng-if="data.isMobileApp" ng-src={{c.data.mespEmptyStateImage}} class="mesp-image-resize">
<h4 ng-if="!data.isMobileApp">${No results match your criteria.}</h4>
<h4 ng-if="data.isMobileApp">${No results match your criteria}</h4>
<div ng-if="!data.isMobileApp">
<p>${You might find more results with a global search.}</p>
<a ng-if="data.showRedirectToGlobal" class="btn btn-primary" role="button"
ng-href="{{getExpandSearchURL()}}" aria-labelledby="{{data.expandSearchLink}}"
title="{{data.expandSearchLink}}" ng-click="setSessionData()">
${Expand your search}
<span class="sr-only" id="{{data.expandSearchLink}}-ext-link}" ng-if="(item.target == '_blank')">${, opens
in a new window}
</span>
</a>
</div>

</div>
</div>
</div>
</div>
</div>

PROBLEM: Whatever I am selecting as filter in one subtopic, the same logic is getting applied in next sub-topics filter. Has anyone worked on something similar.

Dan O Connor · ‎09-08-2023

@vDev Why are you not using the OOTB provision for this?

When you create your Taxonomy and start to populate topics, a new button will appear allowing for users to 'Browse All'. This button brings the user to a topic page where they can see all the relevant KB articles and Catalog Items, along with all the Topics available for view and selection