HOW TO - Open SharePoint Resource in New Tabs w/ Column Formats
Synopsis: Explore options for using custom column formatting to open SharePoint list items in new tabs.
Intro: I received the following question; "Is there a
setting to force SharePoint Online document sets to open in a new tab?"
The customer wanted to replicate the experience when pressing a widget button,
that opens in a new tab. But document libraries and list don't really have
those options. I've created some 'fancy' things in the past using custom
formatting to create hyperlinks. I wanted to take that a step further by adding
instructions to force those hyperlinks to open in a new tab.
Quick Run Down:
1.) Forcing a new tab to open when using a hyperlink
2.) Generating a specific hyperlink from the resource
3.) Formatting the column to do what we want. (Failed
attempt.)
4.) Creating a new column to do what we want. (Success.)
Tech Stack:
- SharePoint
Online
- PowerShell
ISE ( For configuring the JSON, any IDE will be better than working in the
SPO window.)
1.) Forcing a new Tab to open with hyperlinks.
A bit of testing was conducted when implementing this feature. We started with a custom column which starts with the following custom formatting:
{
"$schema":
"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json"
}
Some quick research into the matter found that adding the
following fields will create a hyperlink, and that the specific '
"target" : "_blank"
Our custom format now looks like the following:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"txtContent": "@currentField" ,
"attributes": {
"href": "https://yourdomain.com/yourpage/[@currentField]",
"target": "_blank"
}
}
See the following for some additional info on each item:
The "href" url in the needed a parameter that
referenced the file name.
Note the @currentField, in the example above. Now, that was
just an example, and not a working example.
The formatting for the url now combined two elements and
needed to be configured as
"href" :"='Https://Client.sharepoint.com/sites/sitename/library/forms/allitesm.aspx?id='
+ @currentfield"
(Note the use of the '=' sign, and the single quotes.)
3.) Formatting the
column to do what we want. (Failed Attempt)
There was a 'logic' problem with our formatting goal. When
modifying the 'Name' column, everything works okay with @CurrentField, as that
is the name. The problem lies in the fact that this custom column formatting
persist throughout the rest of the library. Now every single item in the
library, opens in a new tab. This was undesired.
We moved our formatting to a new column, named 'Quick
Navigation', and with that we attempted to use the exact same json as before.
However, the @currentField, is EMPTY. This lead me down the exciting rabbit
hole of how the hell cells reference items in other columns.
There are values like, 'Title' and 'ID' which are very
clearly columns. There are also many values that can be columns, but are not.
These values can also be referenced. They are referenced differently in syntax
with a [$Parameter] style format.
After a lot of failed testing, we reached this successful
Formatting option:
{
"$schema":
"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType":
"a",
"txtContent": "New Tab",
"attributes": {
"href"
: "='https://CLIENTt.sharepoint.com/sites/SiteName/Library/Forms/AllItems.aspx?id='+[$FileLeafRef]",
"target": "_blank"
},
"customRowAction": {
"action": "defaultClick"
}
}
Note the new 'customRowAction'. While testing, I noticed
sometimes the link required a double click, or many clicks. This default click
action helped make the cell more responsive.
4.) Creating a new column to do what we want. (Success.)
We now had a custom column, that showed a 'New Tab' button,
next to every file. The final cherry on top, would be making this feature only
visible on Document Sets, and nothing else.
This lead me down the exciting rabbit hole of using
conditional formatting. Adding 'if' statements to the JSON file. This grew to
include a couple extra things and give me exactly what I want.
Here is the final formatting:
{
"$schema":
"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType":
"a",
"txtContent": "=if(indexOf([$ContentType],'DOCSETCODE')==0,'TAB','
')",
"attributes": {
"iconName":
"=if(indexOf([$ContentType],'DOCSETCODE')==0,'OpenInNewTab',' ')",
"href"
: "='https://client.sharepoint.com/sites/SiteName/Library/Forms/AllItems.aspx?id='+[$FileLeafRef]",
"target": "_blank"
},
"customRowAction": {
"action": "defaultClick"
},
"style":
{
"visibility":
"=if(indexOf([$ContentType],'DOCSETCODE')==0,'visible','hidden')"
}
}
Some quick notes on the above; the same if condition is used for 3 different
formatting options.
txtConent, only displayes if the content type is the same as
the docset starter code. It says 'Tab', otherwise it shows nothing.
iconName, displays a small arrow icon, called by the 'OpenInNewTab'. There are like a hundred of these icons and you can use the following website to find out their names and call them in code: https://uifabricicons.azurewebsites.net/
Visibility, will hide the contents of the cell, without this
style parameter, a mouse over symbol change occurs.
Comments
Post a Comment