List-Formatting
List-Formatting copied to clipboard
External Link Sample?
Suggestion (the more details, the better)
Is it possible to format a column of hyperlinks so external links have an indicator they are "off property"? Something like the standard NavigateExternalInline icon would make sense.
Hi @sympmarc, thank you for the question, at first thought looks ok
for business analysis, following question: What do you consider "external links" or "off property"? (for condition purpose)
- links outside *.sharepoint.com?
- links outside current site?
- links outside M365 enviroment
- other type of format that i am not considering
Are you considering a Mockup like this, the icon appear in the right of the link:
Those are good questions, and I hadn't really thought it through.
Maybe a good starting point would be to have a set of strings that indicate "on property"? Something like ["tenant.SharePoint.com","tenant.com"]
I'm not sure what's possible, so if I had a starting example, I'd be happy to noodle through some approaches and contribute.
Hi @sympmarc
The simplest way is to include a condition with the domains to display/not the icon, don't know if this what you expect or use support field.
Below column format.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "a",
"style": {
"display": "flex",
"text-decoration": "none"
},
"attributes": {
"href": "@currentField",
"target": "_blank",
"class": "ms-fontColor-themePrimary"
},
"children": [
{
"elmType": "div",
"txtContent": "@currentField.desc"
},
{
"elmType": "div",
"style": {
"display": "=if(indexOf(@currentField,'tenant.sharepoint.com')> -1 || indexOf(@currentField,'tenant.com')> -1,'none','block')",
"padding-left": "5px"
},
"attributes": {
"iconName": "NavigateExternalInline",
"class": "ms-fontColor-themePrimary"
}
}
]
}
]
}
]
}
That's exactly the kind of thing I wanted! I think this could be a useful sample. Let me try it out in my real case and see if I have other ideas.
Hyperlink columns with links to the same tenant will start with /
. So relative links are already captured by SharePoint. So you could probably simplify the format to take advantage of that:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "a",
"style": {
"display": "flex",
"text-decoration": "none"
},
"attributes": {
"href": "@currentField",
"target": "_blank",
"class": "ms-fontColor-themePrimary"
},
"children": [
{
"elmType": "div",
"txtContent": "@currentField.desc"
},
{
"elmType": "div",
"style": {
"display": "=if(startsWith(@currentField,'/'),'none','block')",
"padding-left": "5px"
},
"attributes": {
"iconName": "NavigateExternalInline",
"class": "ms-fontColor-themePrimary"
}
}
]
}
]
}
]
}
If you are looking for something more elaborate where you want to see if the tenant is included in the link somewhere you could use =substring(@currentWeb,0,indexOf(@currentWeb,'.sharepoint.com')+15)
to get just that portion (ie https://thechriskent.sharepoint.com). If you only want the tenant portion you could use =substring(@currentWeb,8,indexOf(@currentWeb,'.sharepoint.com'))
(ie thechriskent). That will keep you from having to hardcode the tenant in any format/sample.
But I think the detection of the slash is probably the simplest way (let SharePoint decide if it's external and simply add the icon appropriately).
Very cool.