SharePoint New Experience links opening new tab
The SharePoint new experience offers the end user an awesome new responsive look. It’s easy to use and quick to get up and running.
But for all its awesomeness its terrible for us developers who like to customize the look/feel and standard functionality of what is offered out of the box.
There is literally no avenue to customize certain sections, so we find ourselves hacking together solutions.
One such annoying feature in SharePoint is the seemingly random nature of where it opens new tabs on links instead of opening in the same tab. I found this in a few places, but most recently I found it when using the Tile View third party SPFX solution “40 fantastics” :
https://github.com/OlivierCC/spfx-40-fantastics
I was trying to link a tile directly to a list and it was opening in a new tab. I noticed that SitePages did not have this issue.
With no solution insight I decided to hack one together. After trying many avenues I tried a Traditional Experience Site Page, one created from SharePoint Designer with no masterpage and no minimal html. I then made a simple script to redirect the page to the query string “url”
So in the end, in order to open a link in the new tab, I provided it with :
” https://mysharepoint.sharepoint.com/sitepages/redirect.aspx?url=https://mysharepoint.sharepoint.com/lists/myList”
And Presto, Everything worked! Hacky, but working.
Full example of sitepage.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<%@ Page Language=”C#” %>
<%@ Register tagprefix=”SharePoint” namespace=”Microsoft.SharePoint.WebControls” assembly=”Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<html dir=”ltr” xmlns=”http://www.w3.org/1999/xhtml”><head runat=”server”>
<meta name=”WebPartPageExpansion” content=”full” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled 1</title>
<meta http-equiv=”X-UA-Compatible” content=”IE=10″ />
<SharePoint:CssRegistration Name=”default” runat=”server”/>
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, “\\$&”);
var regex = new RegExp(“[?&]” + name + “(=([^&#]*)|&|#|$)”),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return ”;
return decodeURIComponent(results[2].replace(/\+/g, ” “));
}window.location.href = getParameterByName(“url”);
</script>
</head><body>
<form id=”form1″ runat=”server”>
</form></body>
</html>