Opening a clicked record in new tab page within UI Builder

[SG17]

I'm trying to create a UI Builder workspace page that works like the OOB Vulnerability Management Workspace. When a record is clicked on the page it opens in a new tab. But I don't see any tab components that allow this, only ones that allow tabs within the page. Their list has a Row Clicked event handler but no tab components on the page so I'm not sure how they do it?

[Marco0o1]

Hi @SG17 ,

You can add to you list that display your list a Event;

Then Select Link to destination

In the Mode Form, select Script:

In the external write:

external: {
            url: "/nav_to.do?uri=" + event.payload.table + ".do?sys_id=" + event.payload.sys_id
        }

Then when you click the record in you page that will open you record in another page. Hope that help you

[SG17]

Thanks @Marco0o1, that works to open it in a new browser tab but is there a way to open it in a new UI workspace tab like the 'RE0010001' next to the 'List' tab in my second screenshot? 

[Marco0o1]

Hi @SG17 ;

Try using :

		external: {
			url: `${event.payload.table}.do?sys_id=${event.payload.sys_id}&sysparm_view=workspace`,
			target: '_self'
		}
	

Or this to:

external: {
            url: "/now/vr-analysis/record" + event.payload.table + "/" + event.payload.sys_id
        }

[SG17 · Accepted solution]

I was able to fix this. In the latest Tokyo version when you create UI Builder pages with the three new UI Page Templates you will not get a record in that pages sys_ux_page_registry for chrome_tab. I'm not sure why that value isnt' added automatically in the newer page templates. You can create a page with a newer template or a Blank Page and add it manually. A good base JSON for it is

{
"contextual":[
"record"
],
"maxMainTabLimit":10,
"maxTotalSubTabLimit":30
}

You'll then need to create a Client Script and map it to your Lists Row Clicked Event. If you create a page with the old templates you can see an example of this or use the below

function handler({
    api,
    helpers,
    event,
    imports
}) {
    const {
        routeMapping,
        buildDefaultRoutePayload
    } = imports["global.recordRoutesMapping"]();

    var route = 'record';
    var targetRoute = '';
    const defaultRoutePayload = buildDefaultRoutePayload(route, targetRoute, event);

    const routeMap = api.data.dynamic_routing_simplelist.routeMap;
    const payload = routeMapping(routeMap, defaultRoutePayload, event);

    // If a table name passed into trueupTable matches the existing table
    // refresh trueup DR to get real table name; otherwise use existing.
    if(api.state.routeParentTables && api.state.routeParentTables.split(',').find(table => table === payload.fields.table)) {
        api.setState('navigationPayload', payload); 
        api.data.resolve_route_parent_tables.refresh(); 
    } else { 
        api.emit('NAV_ITEM_SELECTED', payload); 
    } 
}