Data Table widget - open record in new tab

[Max Hanssen1]

Hello community,

I have a question regarding the Data Table Widget; I want to be able to open the selected record in a new tab on demand.  As in, when you left-click; it will still open in the current window/tab.  And add an extra feature of being able to open in a new tab.  Similar to the standard CTRL+Click feature of browser.

I went down the route of adding an extra option when you right-click.  Was able to add the "open in new tab" but I'm struggling a little bit with the code to actually make it work.

The code snippet from the Link Function:

function(scope, element, attrs, ctrl){
	var $ul, $contextMenu;

	scope.focusOnTableHeader = function() {
		element.find(".data-table-title").attr("tabindex", "-1").focus();
	}

	element.on('contextmenu', function(e){
		if (e.ctrlKey)
			return; // ctrlKey is for the debug menu, not this menu

		var rowScope = angular.element(e.target).scope();
		var field, item, fieldVal;

		// Context Menu for tbody
		if (angular.isDefined(rowScope.field) && angular.isDefined(rowScope.item)){
			e.preventDefault();
			field = rowScope.field;
			item = rowScope.item;
			fieldVal = item[field].value;

			var items = [
				['${Open in new tab}', function() {
					// open the record in a new tabl
					],
				['${Show Matching}', function(){
					ctrl.createQueryTerm(scope.data.table, field, item.sys_id, '=').then(function(term){
						ctrl.showMatching(field, term);
					});
				}],
				['${Filter Out}', function(){
					ctrl.createQueryTerm(scope.data.table, field, item.sys_id, '!=').then(function(term){
						ctrl.filterOut(field, term);
					});
				}]
			];

			renderContextMenu(items);
			setContextMenuPosition(e);
		}
	});

Anyone can point me in the right direction?

[gconway]

Hi All, I know this is old. But I have found a solution for the left-click open in new tab. Here is the client script for the Data Table (widget-data-table). With this solution the initial page will not navigate away from your list view.

function ($scope, spUtil, $location, spAriaFocusManager, $window) {
    $scope.$on('data_table.click', function(e, parms) {
        // Determine the page ID, defaulting to 'form' if not set
        var p = $scope.data.page_id || 'form';
        
        // Construct the search parameters for the URL
        var s = { id: p, table: parms.table, sys_id: parms.sys_id, view: 'sp' };
        
        // Manually construct the URL using the parameters without using $location.search
        var baseUrl = $location.absUrl().split('?')[0]; // Get the base URL without existing query params
        var queryParams = Object.keys(s)
            .map(key => key + '=' + encodeURIComponent(s[key]))
            .join('&');
        var newURL = baseUrl + '?' + queryParams;
        
        // Use $window service to open the URL in a new tab
        $window.open(newURL, '_blank'); // '_blank' specifies to open in a new tab
    });
}