Service Portal: Content items icons do not show up in the typeahead search box as expected

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.

 

1. Go to the Content Items (sc_cat_item_content) list and create a new record or open an existing one.

2. Make sure that the Picture field has an image attached to it.

3. Go to Global Search and search for the content item.

   Note that the icon displays in the returned search result.

4. 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.

 

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.

1. Go to sp_search_source.list and open the sp_search_source record with Name=Service Catalog

2. 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');

3. 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>