Modifying Content Displayed in AI Search for Knowledge

[Justin21]

I am trying to display the 'Category of the Knowledge Article', the 'Knowledge Base Name' and the 'View Count' in the search results that appear on knowledge article cards in AI search. 

I added these 'Table Fields' to the 'Taxonomy - Knowledge Search Results' EVAM View Config record (please see images for reference). 

However, these fields are not appearing when I search for a knowledge article using AI Search in Employee Center.

Does anyone know how to make additional fields (like the 'Category' of the knowledge article) appear on the knowledge search results card in AI search (please see images for reference)? 

[Justin21]

Update: I learned that once you add a field as a 'Table Field' to the 'EVAM View Config' record you also need to add that field to the 'View Template' record. The issue that I am having now is that I can replace the values in the template without issue (e.g., I can replace 'Topic' with 'Category'), but I cannot add all the additional fields I need (like Knowledge Base, View Count, etc.). Does anyone know how I can add additional values to the template or if this is even recommended to do? (Attaching a  screenshot for reference).  

[Shamus Mulhall]

Hi @Justin21 

Currently there are only 3 configurable header sections, however you could use one of the 10 available detail sections. I have included an example of the use of one where both the label and the value are set. Set the 'defualtLabelOne' in the static section and the 'defaultValueOne' in the mappings section. Screenshot of the view included as well.

Note: you will need to make sure that you have the appropriate fields added to your EVAM View configuration.

{
    "component": "sn-search-result-evam-card",
    "staticValues": {
        "imageType": {
            "translatable": false,
            "key": "icon"
        },
        "icon": {
            "translatable": false,
            "key": "document-outline"
        },
        "detailLabelOne":{
            "key":"View Count:"
        }
    },
    "mappings": {
        "textHeaderLabelOne": "topic", 
        "textHeaderLabelTwo": "number", 
        "textHeaderLabelThree": "sys_updated_on",
        "title": "ai_search_teaser_title",
        "summary": "ai_search_teaser_text",
        "detailValueOne":"sys_view_count",
        "ariaLabel": "short_description" 
    },
    "actionMappings": {
        "clickAction": "navigation"
    }
}

 

[Justin21]

Thank you for your help, Shamus! The details section definitely helps. I added the fields I wanted to show in both the static and the mapping section. However, the issue that I notice is that if you have more than 1 label and value then the subsequent labels and values are appended together so it's hard to read (attaching a screenshot for reference). It would be nice to add a space to make it easier to read. Do you know if there's an easy way to do that?  

[Shamus Mulhall · Accepted solution]

Hi @Justin21 you can add a detail label separator to help with layout.  The example below will show that as well as an optional parameter to move the location of the details 'above' the main part of the content.

{
    "component": "sn-search-result-evam-card",
    "staticValues": {
        "imageType": {
            "translatable": false,
            "key": "icon"
        },
        "icon": {
            "translatable": false,
            "key": "document-outline"
        },
        "detailLabelOne":{
            "key":"View Count:"
        },
        "detailLabelTwo":{
            "key":"View Count:"
        },
        "detailLabelSeparator":{
            "key":" | "
        },
        "detailPosition":{
            "key":"above"
        }
    },
    "mappings": {
        "textHeaderLabelOne": "topic", 
        "textHeaderLabelTwo": "number", 
        "textHeaderLabelThree": "sys_updated_on",
        "title": "ai_search_teaser_title",
        "summary": "ai_search_teaser_text",
        "detailValueOne":"sys_view_count",
        "detailValueTwo":"sys_view_count",
        "ariaLabel": "short_description" 
    },
    "actionMappings": {
        "clickAction": "navigation"
    }
}