Description
When searching for Content Items (sc_cat_item_content) records from Service Portal using the typeahead search widget, the icon associated to the sc_cat_item_content record does not get displayed. Icons associated to Catalog Items also display fine in the Service Portal search.
Steps to Reproduce
-
Go to the Content Items (sc_cat_item_content) list and create a new record or open an existing one.
-
Make sure that the Picture field has an image attached to it.
-
Go to Global Search and search for the content item.
Note that the icon displays in the returned search result.
-
Go to Service Portal and enter the content item name in the typeahead search.
Note that no icon is displayed next to the returned typeahead search result.
Workaround
Note – The following changes are in the attached'sp_search_source_c96eb1686721220023c82e08f585efff.xml file, so importing this file into the instance will resolve this issue.
Check the following procedure for details about the fix for this issue.
-
Go to sp_search_source.list and open the sp_search_source record with Name=Service Catalog
-
In the Service Catalog Search Source, add 'icon' to the $sp.getRecordDisplayValues list in the Data fetch script section in line 33:
$sp.getRecordDisplayValues(item, sc, 'name,short_description,picture,icon,price,sys_id,sys_class_name');
-
Replace the entire code in the Typeahead template section of the same sp_search_source record for Service Catalog with the following lines:
<div ng-if="item.type == 'sc'"> <a href="{{item.url}}" class="h4 text-primary m-b-sm block"> <i class="fa m-r-sm fa-shopping-cart"></i> <span ng-bind-html="highlight(item.name, data.q)"></span></a> <div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div> <p ng-bind-html="highlight(item.short_description, data.q)"></p> <span class="text-muted m-r-sm" ng-if="data.showPrices && item.price != '$0.00'">{{item.price}}</span> </div> <div ng-if="item.type == 'sc_content'"> <a ng-if="item.content_type == 'external'" ng-href="{{::item.url}}" target="_blank" class="h4 text-primary m-b-sm block"><span ng-bind-html="highlight(item.name, data.q)"></span> ➚</a> <a ng-if="item.content_type == 'kb'" ng-href="?id=kb_article&sys_id={{::item.kb_article}}" class="h4 text-primary m-b-sm block"> <i class="fa m-r-sm fa-file-text-o"></i> <span ng-bind-html="highlight(item.name, data.q)"></span> </a> <a ng-if="item.content_type == 'literal'" ng-href="?id={{item.page}}&sys_id={{item.sys_id}}" class="h4 text-primary m-b-sm block"> <i class="fa m-r-sm fa-file-text-o"></i> <span ng-bind-html="highlight(item.name, data.q)"></span></a> <div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div> <p ng-bind-html="highlight(item.short_description, data.q)"></p> </div>
<div ng-if="item.type == 'sc'"> <a href="{{item.url}}" class="h4 text-primary m-b-sm block"> <i class="fa m-r-sm fa-shopping-cart"></i> <span ng-bind-html="highlight(item.name, data.q)"></span></a> <div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div> <p ng-bind-html="highlight(item.short_description, data.q)"></p> <span class="text-muted m-r-sm" ng-if="data.showPrices && item.price != '$0.00'">{{item.price}}</span> </div> <div ng-if="item.type == 'sc_content'"> <a ng-if="item.content_type == 'external'" ng-href="{{::item.url}}" target="_blank" class="h4 text-primary m-b-sm block"><span ng-bind-html="highlight(item.name, data.q)"></span> ➚</a> <a ng-if="item.content_type == 'kb'" ng-href="?id=kb_article&sys_id={{::item.kb_article}}" class="h4 text-primary m-b-sm block"> <i class="fa m-r-sm fa-file-text-o"></i> <span ng-bind-html="highlight(item.name, data.q)"></span> </a> <a ng-if="item.content_type == 'literal'" ng-href="?id={{item.page}}&sys_id={{item.sys_id}}" class="h4 text-primary m-b-sm block"> <i class="fa m-r-sm fa-file-text-o"></i> <span ng-bind-html="highlight(item.name, data.q)"></span></a> <div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div> <p ng-bind-html="highlight(item.short_description, data.q)"></p> </div>
Related Problem: PRB1262997