How to navigate to the correct record page from a Search Input in UI Builder?

[ronro2]

Hi everyone,

I’m building a Search Input component in UI Builder that allows users to search for tasks. I’ve already created a Search Configuration that works, but I need help with the next step:

Goal:
When I type a case number in the search field and select a result, I want to navigate directly to the correct Record Page for that task.

Challenge:
The tasks are stored in three different tables, which are child tables of custom table called x_vgll_rail_task:

• x_vgll_rail_request
• x_vgll_rail_ticket
• x_vgll_rail_demand

Each table has its own record page i UI Builder, for example:

https://<instance>/x/vgll/ass-workspace/rail-ticket-record-page/x_vgll_rail_ticket/-1
https://<instance>/x/vgll/ass-workspace/rail-demand-record-page/x_vgll_rail_demand/-1
https://<instance>/x/vgll/ass-workspace/rail-request-record-page/x_vgll_rail_request/-1

When a record is opened, the URL looks like this:

https://<instance>/x/vgll/ass-workspace/rail-request-record-page/x_vgll_rail_request/<sys_id>

Question:
How can I configure the Search Input so that when a result is selected, it navigates to the correct record page based on the table name and sys_id?

Can I use a Client Script for this? Is there a best practice approach?

I’ve seen an example where they use following actions Knowledge Center workspace:

• Search executed: Execute Client Script
  
  

/**
 * @Param {params} params
 * @Param {api} params.api
 * @Param {any} params.event
 * @Param {any} params.imports
 * @Param {ApiHelpers} params.helpers
 */
function handler({
    api,
    event,
    helpers,
    imports
}) {
    if (event.payload.searchTerm != "") {
        var isAISearchEnabled = api.data.check_ai_search_satus_1.output;
        if (isAISearchEnabled) {
            const fields = {
                searchContextConfigId: event.payload.searchContextConfigId
            };
            const params = {
                searchTerm: event.payload.searchTerm
            };
            helpers.navigate.to('search-results', fields, params, false, false);

        } else {
            const {
                SEARCH_CONSTANTS
            } = imports["sn_km_center.searchInputUtils"]();
            const fields = {
                globalSearchViewConfigId: SEARCH_CONSTANTS.GLOBAL_SEARCH_VIEW_CONFIG_ID
            };
            const params = {
                searchTerm: event.payload.searchTerm,
                selectedSearchContext: 'now/knowledge-center'
            };
            helpers.navigate.to('kc-zing-search', fields, params, false, false);

        }
    }
}​

• Suggestion item clicked: Execute Client Script

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
const { handleNavigation } = imports["sn_km_center.searchInputUtils"]();
    handleNavigation(api, event, helpers);
}

My idea:
I’d like to build a script that:

• Gets the table name and sys_id from the selected item.
• Navigates to the correct record page using helpers.navigate.to()(I guess?)

Does anyone have an example of how to do this in a simple and best practice way? Or if you could take inspiration of the example provided? 

Alternatively, how would you handle it if you want this to work directly on the search term (without clicking a suggestion)?

---

Summary:

• Three different tables, three different record pages.
• Need to navigate based on table name and sys_id.
• Open to best practice tips (Client Script, imports, or other approaches).

Thanks in advance guys!!