Open related item in new tab/window

[Jaydius]

Is it possible to have links in the related items control open in a new tab or window when clicked?

[YuriyMedvedev]

Hi! Just put this code in Javascript:

Code: Select all

EditLink2 = function(item,i){
     window.open($(item).attr('href'), '_blank');
};

[Jaydius]

Hi! Just put this code in Javascript:

Code: Select all

EditLink2 = function(item,i){
     window.open($(item).attr('href'), '_blank');
};

Never managed to get this to work. Am I missing something? Does it make a difference that im displaying the form in a Modal Popup? Im trying to make related documents open in a new tab, instead of taking the user away from the form each time.

[Nikita Kurguzov]

Hello, Jaydius!
This code should work with Related Items, even though it wouldn't automatically update the page when you've created a New Item:

Code: Select all

//Add related-items class to the Related Items control first
$('.related-items #idHomePageNewItem').removeProp('onclick');

$(".related-items #idHomePageNewItem").on("click", function(event){
	event.preventDefault();
	var item = $(".related-items #idHomePageNewItem");
	window.open(item.attr('href'), '_blank');
});

But this code wouldn't work for Related Documents (connected to Documents Library). If you want to quickly update documents, I recommend simply using our drag-n-drop feature, it's much easier than opening a new tab. You just need to set Related Items Quick Edit setting to None.

[Jaydius]

I want to use it specifically with related documents. I don't want to click on a file and be taken away from the form. Wanting to open the chosen document in a new tab/window. I'd also like to retain the drag and drop functionality when a user wants to add a new related document.

Is this possible?

[Nikita Kurguzov]

Try using this code:

Code: Select all

$('.related-docs .ms-listlink').removeProp('onclick');

$(".related-docs .ms-listlink").on("click", function(event){
	event.preventDefault();
	var item = $(".related-docs .ms-listlink");
	window.open(item.attr('href'), '_blank');
});

Replace related-docs with the class of your Related Documents control first though.

[Jaydius]

Try using this code:

Code: Select all

$('.related-docs .ms-listlink').removeProp('onclick');

$(".related-docs .ms-listlink").on("click", function(event){
	event.preventDefault();
	var item = $(".related-docs .ms-listlink");
	window.open(item.attr('href'), '_blank');
});

Replace related-docs with the class of your Related Documents control first though.

Thank you Nikita, that works great!

The only issue is, when paging through the document listing, it seems to break the code. Links open on the initial listing as expected, but after clicking for the next set of results, the documents begin opening in the same window again.

[Nikita Kurguzov]

Indeed, when there are multiple pages of documents, switching between pages overrides this code.

Try this instead:

Code: Select all

function openInNewTab() {
	$('.related-docs .ms-listlink').removeProp('onclick');

	$(".related-docs .ms-listlink").on("click", function(event){
		event.preventDefault();
		var item = $(".related-items .ms-listlink");
		window.open(item.attr('href'), '_blank');
	});
	
	$(".related-docs .ms-commandLink").on("click", function(event){
		openInNewTab();
	});
}

openInNewTab();

Though, I do advice caution. There might be some issues with this code if you have some documents which are only for download and cannot be opened online.

[Jaydius]

Indeed, when there are multiple pages of documents, switching between pages overrides this code.

Try this instead:

Code: Select all

function openInNewTab() {
	$('.related-docs .ms-listlink').removeProp('onclick');

	$(".related-docs .ms-listlink").on("click", function(event){
		event.preventDefault();
		var item = $(".related-items .ms-listlink");
		window.open(item.attr('href'), '_blank');
	});
	
	$(".related-docs .ms-commandLink").on("click", function(event){
		openInNewTab();
	});
}

openInNewTab();

Though, I do advice caution. There might be some issues with this code if you have some documents which are only for download and cannot be opened online.

That seems to break the code? It opens a new blank window?

[Nikita Kurguzov]

Seems like the code was causing more issues than it solved.

Finally, I can recommend this solution which should work in all situations:

Code: Select all

var myVar = setInterval(myTimer, 100);

function myTimer() {
	$('.related-items .ms-listlink').removeProp('onclick');

	$(".related-items .ms-listlink").on("click", function(event){
		event.preventDefault();
		var item = $(this);
		window.open(item.attr('href'), '_blank');
	});
}

It might be performance heavy, since it runs constant checks in the background, but nothing too extreme. If you want, you can increase timer interval, but that might lead to some situations when you click too fast and the code isn't applied yet.

Let me know if it helps!