List-Formatting icon indicating copy to clipboard operation
List-Formatting copied to clipboard

External Link Sample?

Open sympmarc opened this issue 2 years ago • 6 comments

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. image

sympmarc avatar Jun 15 '22 17:06 sympmarc

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: image

aaclage avatar Jun 16 '22 05:06 aaclage

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.

sympmarc avatar Jun 16 '22 12:06 sympmarc

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.

image

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"
              }
            }
          ]
        }
      ]
    }
  ]
}

aaclage avatar Jun 16 '22 20:06 aaclage

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.

sympmarc avatar Jun 16 '22 20:06 sympmarc

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).

thechriskent avatar Jun 21 '22 21:06 thechriskent

Very cool.

sympmarc avatar Jun 21 '22 21:06 sympmarc