How to show icons/images unique to each knowledge article on Service Portal


The use case is to provide a unique icon to each knowledge article and then render it on the Service Portal. 


**** This solution involves customization and shall be responsibility of customer/owner of the platform.****

Release or Environment

This has been developed and tested on New York. 

However, the changes are, more or less, version independent. 


Steps to achieve this:


Knowledge Base: 

  1. Choose a knowledge base on which you'd like this to have.
  2. Go the the details and click on update for ICON field.
  3. Choose an image for the knowledge base and save it.
  4. The knowledge base should have an icon attached to it.


Knowledge Article : 

  1. Go to kb_knowledge table.
  2. Create a new column of type IMAGE (label- ICON) on the table and save it.
  3. Create an article and provide an image to it, that you'd like to show on the Portal for that article and save the article.


Widget Instance :

  1. Go to the kb_search page of the Portal. 
  2. Go to instance of Knowledge Results on the page . (
  3. Modify the knowledge_fields section in the Additional Options, JSON  as below.


Angular Template :

  1. Look for the template kb_result_article_summary in the sp_ng_template table. ( 
  2. Modify the section where it renders the image for the article.
  1. 3. Add the code <span ng-if="f != 'u_icon'"> above the <ng-switch-default section, to make sure the image name is NOT shown on the portal.
  2. 4. Close it appropriately to make sure complete switch is within the new IF.


Property :

  1. Enable the below property IF you'd like to render the icons on the Portal without necessity to login.