Hey there! 😎

Have you ever looked at the search results in your Service Portal and thought, “This is okay, but I really need to show that custom field/icon/status right here on the card”?

If you are using AI Search, the days of cloning the ‘Search Page’ widget and hacking through AngularJS code are (mostly) over. Now, we have a much more structured (and declarative) friend called EVAM – Entity View Action Mapper.

In today’s post, we will go through the process of creating a custom search result card for a specific table and configuring the Service Portal to handle the click action correctly.

Let’s dive in! 🚀

What is EVAM?

To keep it simple: EVAM is the middleman between your raw database records and the UI components. It allows us to define a View Template (how it looks) and map the record’s fields to that template.

You can read the full theory in the official documentation here: Entity View Action Mapper (EVAM).

Step 1: Create the View Template

This is where the magic happens. We need to define the JSON structure that tells the system how to render the data. Navigate to UX Composite Data Templates (sys_ux_composite_data_template).

We have a few options for the component we can use here.

Option A: The Standard Card (sn-search-result-evam-card)

This is the most common component for Service Portal AI Search. It is designed specifically for search results and supports a title, summary, metadata, and a few other slots.

Here is a robust example for a custom “Project” record:

{
    "component": "sn-search-result-evam-card",
    "staticValues": {
        "imageType": {
            "translatable": false,
            "key": "icon"
        },
        "icon": {
            "translatable": false,
            "key": "briefcase-outline"
        }
    },
    "mappings": {
        "title": "short_description",
        "summary": "description",
        "subtitle": "number",
        "footerMainText": "state"
    },
    "actionMappings": {
        "clickAction": "navigation"
    }
}

{
    "component": "sn-search-result-evam-card",
    "staticValues": {
        "imageType": {
            "translatable": false,
            "key": "icon"
        },
        "icon": {
            "translatable": false,
            "key": "briefcase-outline"
        }
    },
    "mappings": {
        "title": "short_description",
        "summary": "description",
        "subtitle": "number",
        "footerMainText": "state"
    },
    "actionMappings": {
        "clickAction": "navigation"
    }
}

🎨 Pro Tip: Spicing it up with Icons Notice the staticValues object? That is where you can hardcode the icon for your specific table.

• imageType: Set this to "icon" to tell the card we aren’t using a user avatar.
• icon: This is the name of the icon you want to display.

“But Cezary, where do I find the icon names?” 🧐 ServiceNow has a massive library of Next Experience icons. You can browse all valid icon names in the Now Icon Gallery: 👉 ServiceNow Icon Gallery (Utah+)

Option B: The Advanced Card (now-card-evam-record)

If the standard search card is too limiting (maybe you want highlights, colored headers, or specific sidebars), you can try using the now-card-evam-record component. This is the heavy lifter often used in Workspaces, but it can work in Portal too if you need that extra flair.

It supports properties like highlightedHeaderIcon, highlightedHeaderBkgColor, and sidebar.

Check out this excellent community article for a deep dive into configuring this specific component: 👉 EVAM View Template – JSON Configuration

Step 2: The EVAM View Config

Now we need to link this template to our specific table. Go to EVAM View Configs (sys_ux_composite_data_template_predicate).

Create a new record inside your EVAM Definition (usually the “Portal Search Bundle”):

1. Table: Your custom table (e.g., u_project).
2. View Template: Select the template we created in Step 1.
3. Table Fields: Important! You must list every field you referenced in your JSON mappings (e.g., short_description, description, number, state). If you miss a field here, the card will show blank spaces! 😱

Step 3: Action Assignment

In the related list of your View Config, ensure you have an Action Assignment. Usually, we map the standard navigation action. This tells the system that the card is clickable.

Step 4: Search Results Action Configuration

This is the tricky part that often gets overlooked! 🕵️‍♂️

Even if EVAM knows how to display the card, the Service Portal needs to know where to take the user when they click it.

Unlike Workspace (which uses complex declarative actions), Service Portal has its own simple table for this: Search Results Action Configuration (sp_ai_search_results_action_config).

1. Navigate to sp_ai_search_results_action_config.list.
2. Create a new record.
3. Search Source: This is crucial! Select the AI Search Source that is indexing your custom table (e.g., “Service Portal – Project”). If you leave this empty or pick the wrong one, the rule won’t apply.
4. Service Portal: Select the portal where this action should work.
5. Action name: This must match the action name defined in your EVAM Action Assignment (usually navigation).
6. Page: Select the specific Portal Page (sp_page) you want to open (e.g., ticket or form).
7. Payload Query Parameters: this optional steps allows you to pass parameters to the portal page. You can pick available parameters and map them to the desired parameter name.

The system automatically passes the sys_id and table parameters to the target page, so you don’t need to write any JSON here. Just point it to the right page, and you are good to go!

Summary

And there you have it!

1. Template (JSON) defines the look (and now you know how to use icons!).
2. View Config maps the data fields.
3. Action Config (sp_ai_search_results_action_config) tells the Portal which page to open for a specific Search Source.

It might seem like a few extra steps compared to the old widgets, but the flexibility and performance of AI Search are definitely worth it.