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?

[Mark Stanger · Accepted solution]

I *think* this should work.  You'll need to pass in the portal suffix into a data object from your server script to make this dynamic, but you could quickly test it just by replacing 'sp' with the suffix of your portal.

['${Open in new tab}', function() {
    // construct the link
    var url = '/sp?id=form&table=' + scope.data.table + '&sys_id=' + item.sys_id + '&view=';
    // open the record in a new tab
    window.open(url);
]

[Max Hanssen1]

Thank you so much Mark!!! That worked like a charm!

[Max Hanssen1]

For anyone that is interested, I also have implemented the same functionality when doing a Ctrl + left-click on the record.

If your HTML looks like this: 

ng-click="go(data.table, item)"

Then you just need to add the below in your $scope.go function:

if (window.event.ctrlKey) { // ctrl was held down during the click
 // construct the link
 var url =  'www.google.com';
 // open the record in a new tab
 window.open(url);
}
else { // normal click
 [original code of the function]
}

[Alfrin Vallejo]

Hi Max,

I'm interested in a Ctrl + Left-Click function. Can you provide me with the entire code and where I'm supposed to place it? I'm trying to put it in the Link function of my Data Table Instance widget but I'm getting compiler errors. 

Thanks!

-Alfrin Vallejo