SOLVED

Conditional Formatting to show multiple hyperlinks on one field

Occasional Contributor

Hi,

 

Wondering if the following is possible?

I have a list in SharePoint Online storing the domains that are owned by the company. Against each one I want links to open various hyperlinks to test if the domain is set up correctly, or run tests, get WHOIS info etc. Currently I have added text columns for Domain Check, Whois and WWW Link that have no content and just generate the hyperlinks based on the column format JSON referring to the Domain Name field (Title).

 

domains.png

What I would like to do is have a single field called Actions, that contains multiple 'nicely formatted' hyperlinks (coloured pill format would be great) that are automatically generated based on the Domain Name field.

 

I can't find any samples showing this although I'm sure some clever person can provide the answer.

 

For reference, I'm using the following column formatting to build the domain check, whois and WWW link fields hyperlinks:

 Domain Check:

{
  "elmType": "a",
  "txtContent": "Domain Check",
  "attributes": {
    "target": "_blank",
    "href": "='https://www.mxtoolbox.com/domain/' + [$Title]"
  }
}

 WhoIs:

{
  "elmType": "a",
  "txtContent": "WHOIS",
  "attributes": {
    "target": "_blank",
    "href": "='https://who.is/whois/' + [$Title]"
  }
}

 WWW Link:

{
  "elmType": "a",
  "txtContent": "='www.' + [$Title]",
  "attributes": {
    "target": "_blank",
    "href": "='http://www.' + [$Title]"
  }
}

 

 Thanks in advance.

 

Alex

6 Replies

@Jose Zaldivar Unfortunately not, I am still using separate columns for each link.

@Alex Lush if you are still interested, I have somewhat resolved this issue. stealing the hovercard from @chrisKent I was able to modify and create a context menu that contains links and row action, on-hover of a vertical ellipse. let me know if this works for you.

 

{
   "$schema":"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType":"div",
   "style":{
      "font-size":"18pt"
   },
   "attributes":{
      "iconName":"MoreVertical"
   },
   "customCardProps":{
      "formatter":{
         "elmType":"div",
         "children":[
            {
               "elmType":"div",
               "children":[
                  {
                     "elmType":"div",
                     "style":{
                        "padding":"5px 25px 5px 5px"
                     },
                     "children":[
                        {
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"div",
                                 "style":{
                                    "font-size":"18px",
                                    "font-weight":"550",
                                    "text-align":"center",
                                    "margin-bottom":"10px"
                                 },
                                 "txtContent":"Item Menu"
                              }
                           ]
                        },
						
						{
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"span",
                                 "style":{
                                    "font-size":"16px",
                                    "font-weight":"600",
                                    "padding-left":"5px"
                                 },
                                 "attributes":{
                                    "iconName":"OpenFile"
                                 }
                              },
                              {
                                 "elmType":"span",
                                 "style":{
                                    "padding-left":"9px",
                                    "border":"none",
                                    "background-color":"transparent",
                                    "cursor":"pointer",
                                    "text-decoration":"none"
                                 },
                                 "customRowAction":{
                                    "action":"defaultClick"
                                 },
                                 "attributes":{
                                    "class":"ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
                                    "title":"Open Item"
                                 },
                                 "txtContent":"Open"
                              }
                           ]
                        },
                        {
                           "elmType":"div",
                           "style":{
                              "font-size":"10px",
                              "font-weight":"600",
                              "text-align":"center",
                              "margin":"4px",
                              "padding":"5px"
                           },
                           "txtContent":""
                        },
						
                        
						{
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"span",
                                 "style":{
                                    "font-size":"16px",
                                    "font-weight":"600",
                                    "padding-left":"5px"
                                 },
                                 "attributes":{
                                    "iconName":"Edit"
                                 }
                              },
                              {
                                 "elmType":"span",
                                 "style":{
                                    "padding-left":"9px",
                                    "border":"none",
                                    "background-color":"transparent",
                                    "cursor":"pointer",
                                    "text-decoration":"none"
                                 },
                                 "customRowAction":{
                                    "action":"editProps"
                                 },
                                 "attributes":{
                                    "class":"ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
                                    "title":"Edit item"
                                 },
                                 "txtContent":"Edit"
                              }
                           ]
                        },
                        {
                           "elmType":"div",
                           "style":{
                              "font-size":"10px",
                              "font-weight":"600",
                              "text-align":"center",
                              "margin":"4px",
                              "padding":"5px"
                           },
                           "txtContent":""
                        },
						
						
						{
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"span",
                                 "style":{
                                    "font-size":"16px",
                                    "font-weight":"600",
                                    "padding-left":"5px"
                                 },
                                 "attributes":{
                                    "iconName":"History"
                                 }
                              },
                              {
                                 "elmType":"a",
                                 "style":{
                                    "padding-left":"9px",
                                    "border":"none",
                                    "background-color":"transparent",
                                    "cursor":"pointer",
                                    "text-decoration":"none"
                                 },
                                 "attributes":{
                                    "target":"_blank",
                                    "href":"=@currentWeb + '/_layouts/15/versions.aspx?List=%7B1f03e51f-cd77-4d41-97b0-cf9de163f72b%7D&ID=' + [$ID]",
                                    "title":"Version History"
                                 },
                                 "txtContent":"Version history"
                              }
                           ]
                        },
                        
						
						{
                           "elmType":"div",
                           "style":{
                              "font-size":"10px",
                              "font-weight":"600",
                              "text-align":"center",
                              "margin":"4px",
                              "padding":"5px"
                           },
                           "txtContent":""
                        },
                        
						
						
                        
					{
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"span",
                                 "style":{
                                    "font-size":"16px",
                                    "font-weight":"600",
                                    "padding-left":"5px"
                                 },
                                 "attributes":{
                                    "iconName":"AlarmClock"
                                 }
                              },
                              {
                                 "elmType":"a",
                                 "style":{
                                    "padding-left":"9px",
                                    "border":"none",
                                    "background-color":"transparent",
                                    "cursor":"pointer",
                                    "text-decoration":"none"
                                 },
                                 "attributes":{
                                    "target":"_blank",
                                    "href":"=@currentWeb + '/_layouts/15/SubNew.aspx?List=%7B1f03e51f-cd77-4d41-97b0-cf9de163f72b%7D&ID=' + [$ID]",
                                    "title":"Alert me"
                                 },
                                 "txtContent":"Alert"
                              }
                           ]
                        },
                        
						
						{
                           "elmType":"div",
                           "style":{
                              "font-size":"10px",
                              "font-weight":"600",
                              "text-align":"center",
                              "margin":"4px",
                              "padding":"5px"
                           },
                           "txtContent":""
                        },
                        
						
						
						
                        {
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"span",
                                 "style":{
                                    "font-size":"16px",
                                    "font-weight":"600",
                                    "padding-left":"5px"
                                 },
                                 "attributes":{
                                    "iconName":"WorkFlow"
                                 }
                              },
                              {
                                 "elmType":"a",
                                 "style":{
                                    "padding-left":"9px",
                                    "border":"none",
                                    "background-color":"transparent",
                                    "cursor":"pointer",
                                    "text-decoration":"none"
                                 },
                                 "attributes":{
                                    "target":"_blank",
                                    "href":"=@currentWeb + '/_layouts/15/workflow.aspx?List=%7B1f03e51f-cd77-4d41-97b0-cf9de163f72b%7D&ID=' + [$ID]",
                                    "title":"Workflows"
                                 },
                                 "txtContent":"Workflows"
                              }
                           ]
                        },
                        
						
						{
                           "elmType":"div",
                           "style":{
                              "font-size":"10px",
                              "font-weight":"600",
                              "text-align":"center",
                              "margin":"4px",
                              "padding":"5px"
                           },
                           "txtContent":""
                        }
						
						
						
						
                        
                     ]
                  }
               ]
            }
         ]
      },
      "openOnEvent":"hover",
      "directionalHint":"bottomCenter",
      "isBeakVisible":true
   }
}

 

Thank you Alex, any chance you can post a screenshot of how it looks like now? This is very useful. I will share this tip.
best response confirmed by Alex Lush (Occasional Contributor)
Solution

@Jose Zaldivar it was @jaxkookie that provided the code sample!

 

@jaxkookie you are a legend - thank you so much!

 

I have taken what you provided and used it to provide an 'Actions' menu with all the required functions. A sample of how it looks is attached.

 

For anyone else looking to use this sample full instructions below:

 

  1. Create a blank list
  2. Populate it with some sample data (domain names in the title field e.g. example.com)
  3. Add a new column of type 'Single line of text' (I think the column type is largely irrelevant) and call it 'Actions'
  4. Drop down the heading on the new actions menu and select 'Column settings' > 'Format this column'
  5. Switch to 'advanced mode'
  6. Paste in the following code:
{
   "$schema":"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType":"div",
   "style":{
      "font-size":"18pt"
   },
   "attributes":{
      "iconName":"MoreVertical"
   },
   "customCardProps":{
      "formatter":{
         "elmType":"div",
         "children":[
            {
               "elmType":"div",
               "children":[
                  {
                     "elmType":"div",
                     "style":{
                        "padding":"5px 25px 5px 5px"
                     },
                     "children":[
                        {
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"div",
                                 "style":{
                                    "font-size":"18px",
                                    "font-weight":"550",
                                    "text-align":"center",
                                    "margin-bottom":"10px"
                                 },
                                 "txtContent":"Actions"
                              }
                           ]
                        },
					
						{
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"span",
                                 "style":{
                                    "font-size":"16px",
                                    "font-weight":"600",
                                    "padding-left":"5px"
                                 },
                                 "attributes":{
                                    "iconName":"CheckList"
                                 }
                              },
                              {
                                 "elmType":"a",
                                 "style":{
                                    "padding-left":"9px",
                                    "border":"none",
                                    "background-color":"transparent",
                                    "cursor":"pointer",
                                    "text-decoration":"none"
                                 },
                                 "attributes":{
                                    "target":"_blank",
                                    "href":"='https://www.mxtoolbox.com/domain/' + [$Title]",
                                    "title":"='Open domain check for ' + [$Title] + ' in a new window.'"
                                 },
                                 "txtContent":"Domain Check"
                              }
                           ]
                        },

                        {
                           "elmType":"div",
                           "style":{
                              "font-size":"10px",
                              "font-weight":"600",
                              "text-align":"center",
                              "margin":"4px",
                              "padding":"5px"
                           },
                           "txtContent":""
                        },

                        {
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"span",
                                 "style":{
                                    "font-size":"16px",
                                    "font-weight":"600",
                                    "padding-left":"5px"
                                 },
                                 "attributes":{
                                    "iconName":"SearchIssue"
                                 }
                              },
                              {
                                 "elmType":"a",
                                 "style":{
                                    "padding-left":"9px",
                                    "border":"none",
                                    "background-color":"transparent",
                                    "cursor":"pointer",
                                    "text-decoration":"none"
                                 },
                                 "attributes":{
                                    "target":"_blank",
                                    "href":"='https://who.is/whois/' + [$Title]",
                                    "title":"='Open who is check for ' + [$Title] + ' in a new window.'"
                                 },
                                 "txtContent":"Who Is Check"
                              }
                           ]
                        },

                        {
                           "elmType":"div",
                           "style":{
                              "font-size":"10px",
                              "font-weight":"600",
                              "text-align":"center",
                              "margin":"4px",
                              "padding":"5px"
                           },
                           "txtContent":""
                        },

                        {
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"span",
                                 "style":{
                                    "font-size":"16px",
                                    "font-weight":"600",
                                    "padding-left":"5px"
                                 },
                                 "attributes":{
                                    "iconName":"Link"
                                 }
                              },
                              {
                                 "elmType":"a",
                                 "style":{
                                    "padding-left":"9px",
                                    "border":"none",
                                    "background-color":"transparent",
                                    "cursor":"pointer",
                                    "text-decoration":"none"
                                 },
                                 "attributes":{
                                    "target":"_blank",
                                    "href":"='https://www.' + [$Title]",
                                    "title":"='Open https://www.' + [$Title] + ' in a new window.'"
                                 },
                                 "txtContent":"='www.' + [$Title]"
                              }
                           ]
                        },
                        
                        {
                           "elmType":"div",
                           "style":{
                              "font-size":"10px",
                              "font-weight":"600",
                              "text-align":"center",
                              "margin":"4px",
                              "padding":"5px"
                           },
                           "txtContent":""
                        },

                        {
                           "elmType":"div",
                           "children":[
                              {
                                 "elmType":"span",
                                 "style":{
                                    "font-size":"16px",
                                    "font-weight":"600",
                                    "padding-left":"5px"
                                 },
                                 "attributes":{
                                    "iconName":"Link"
                                 }
                              },
                              {
                                 "elmType":"a",
                                 "style":{
                                    "padding-left":"9px",
                                    "border":"none",
                                    "background-color":"transparent",
                                    "cursor":"pointer",
                                    "text-decoration":"none"
                                 },
                                 "attributes":{
                                    "target":"_blank",
                                    "href":"='https://' + [$Title]",
                                    "title":"='Open https://' + [$Title] + ' in a new window.'"
                                 },
                                 "txtContent":"[$Title]"
                              }
                           ]
                        },
						{
                           "elmType":"div",
                           "style":{
                              "font-size":"10px",
                              "font-weight":"600",
                              "text-align":"center",
                              "margin":"4px",
                              "padding":"5px"
                           },
                           "txtContent":""
                        }
                     ]
                  }
               ]
            }
         ]
      },
      "openOnEvent":"hover",
      "directionalHint":"bottomCenter",
      "isBeakVisible":true
   }
}​

Click Save.

 

You should now see the three dots menu on the actions column.

 

Hovering should bring up the menu.

@Alex Lush , great job on the write-up. For my menu, I made a few more tweaks to replicate the title menu look and feel. by promoting the title field without links, I was able to reproduce the title field with links. I did this to save real estate, then I only needed one column. I am also grabbing the item ID without the ID column visible in the view using the [$FileRef], and a couple of substring formulas. The last piece I need to make this a cookie-cutter solution is a way to dynamically get the list guid.

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "10pt",
    "color": "#2c2a29"
  },

      "txtContent": "@currentField",
  "children": [
    {
      "elmType": "div",
      "style": {
        "color": "#2c2a29"
      }
    },
    {
      "elmType": "a",
      "style": {
        "white-space": "nowrap",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "background-color": "transparent",
        "cursor": "pointer",
        "text-decoration": "none",
        "color": "#2c2a29"
      }
    },
    {
      "elmType": "div",
      "style": {
        "color": "#2c2a29"
      }
    },
    {
      "elmType": "span",
      "style": {
        "font-size": "16pt",
        "display": "flex",
        "height": "100%",
        "flex-wrap": "nowrap",
        "justify-content": "center",
        "align-items": "center"
      },
      "attributes": {
        "iconName": "MoreVertical",
        "class": "ms-bgColor-gray50--hover",
        "title": "Show Actions"
      }
    }
  ],
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "style": {
            "border": "1px solid #002855"
          },
          "children": [
            {
              "elmType": "div",
              "children": [
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "12pt",
                        "color": "#ffffff",
                        "font-weight": "600",
                        "text-align": "center",
                        "padding-bottom": "5px",
                        "margin-bottom": "5px",
                        "border-bottom": "1px solid #002855",
                        "background-color": "#002855"
                      },
                      "txtContent": "Item Menu"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "padding": "5px 5px 5px 5px",
                    "margin": "5px 5px 5px 5px"
                  },
                  "attributes": {
                    "class": "ms-bgColor-success--hover ms-fontColor-black--hover"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-weight": "600",
                        "padding-left": "5px"
                      },
                      "attributes": {
                        "iconName": "OpenFile"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "padding": "9px 4px 6px 9px",
                        "border": "none",
                        "background-color": "transparent",
                        "cursor": "pointer",
                        "text-decoration": "none",
                        "color": "#2c2a29"
                      },
                      "customRowAction": {
                        "action": "defaultClick"
                      },
                      "attributes": {
                        "title": "Open Item"
                      },
                      "txtContent": "Open"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "padding": "5px 5px 5px 5px",
                    "margin": "5px 5px 5px 5px"
                  },
                  "attributes": {
                    "class": "ms-bgColor-success--hover ms-fontColor-black--hover"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-weight": "600",
                        "padding-left": "5px"
                      },
                      "attributes": {
                        "iconName": "Edit"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "padding-left": "9px",
                        "border": "none",
                        "background-color": "transparent",
                        "cursor": "pointer",
                        "text-decoration": "none",
                        "color": "#2c2a29"
                      },
                      "customRowAction": {
                        "action": "editProps"
                      },
                      "attributes": {
                        "title": "Edit item"
                      },
                      "txtContent": "Edit"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "padding": "5px 5px 5px 5px",
                    "margin": "5px 5px 5px 5px",
                    "border-bottom": "1px solid #c0c0c0"
                  },
                  "attributes": {
                    "class": "ms-bgColor-success--hover ms-fontColor-black--hover"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-weight": "600",
                        "padding-left": "5px"
                      },
                      "attributes": {
                        "iconName": "History"
                      }
                    },
                    {
                      "elmType": "a",
                      "style": {
                        "padding-left": "9px",
                        "border": "none",
                        "background-color": "transparent",
                        "cursor": "pointer",
                        "text-decoration": "none",
                        "color": "#2c2a29"
                      },
                      "attributes": {
                        "target": "_blank",
                        "href": "=@currentWeb + '/_layouts/15/versions.aspx?List=' + '%7B4d95007f-f5ae-4988-b1d9-24b78eed12b7%7D' + '&ID=' + substring([$FileRef],lastIndexOf([$FileRef],'/')+1,indexOf([$FileRef],'_'))",
                        "title": "Version History"
                      },
                      "txtContent": "Version history"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "padding": "5px 5px 5px 5px",
                    "margin": "5px 5px 5px 5px"
                  },
                  "attributes": {
                    "class": "ms-bgColor-success--hover ms-fontColor-black--hover"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-weight": "600",
                        "padding-left": "5px"
                      },
                      "attributes": {
                        "iconName": "AlarmClock"
                      }
                    },
                    {
                      "elmType": "a",
                      "style": {
                        "padding-left": "9px",
                        "border": "none",
                        "background-color": "transparent",
                        "cursor": "pointer",
                        "text-decoration": "none",
                        "color": "#2c2a29"
                      },
                      "attributes": {
                        "target": "_blank",
                        "href": "=@currentWeb + '/_layouts/15/SubNew.aspx?List=%7B4d95007f-f5ae-4988-b1d9-24b78eed12b7%7D&ID=' + substring([$FileRef],lastIndexOf([$FileRef],'/')+1,indexOf([$FileRef],'_'))",
                        "title": "Alert me"
                      },
                      "txtContent": "Alert"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "padding": "5px 5px 5px 5px",
                    "margin": "5px 5px 5px 5px",
                    "border-bottom": "1px solid #c0c0c0"
                  },
                  "attributes": {
                    "class": "ms-bgColor-success--hover ms-fontColor-black--hover"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-weight": "600",
                        "padding-left": "5px"
                      },
                      "attributes": {
                        "iconName": "WorkFlow"
                      }
                    },
                    {
                      "elmType": "a",
                      "style": {
                        "padding-left": "9px",
                        "border": "none",
                        "background-color": "transparent",
                        "cursor": "pointer",
                        "text-decoration": "none",
                        "color": "#2c2a29"
                      },
                      "attributes": {
                        "target": "_blank",
                        "href": "=@currentWeb + '/_layouts/15/workflow.aspx?List=%7B4d95007f-f5ae-4988-b1d9-24b78eed12b7%7D&ID=' + substring([$FileRef],lastIndexOf([$FileRef],'/')+1,indexOf([$FileRef],'_'))",
                        "title": "Workflows"
                      },
                      "txtContent": "Workflows"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "padding": "5px 5px 5px 5px",
                    "margin": "5px 5px 5px 5px"
                  },
                  "attributes": {
                    "class": "ms-bgColor-success--hover ms-fontColor-black--hover"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-weight": "600",
                        "padding-left": "5px"
                      },
                      "attributes": {
                        "iconName": "PageList"
                      }
                    },
                    {
                      "elmType": "a",
                      "style": {
                        "padding-left": "9px",
                        "border": "none",
                        "background-color": "transparent",
                        "cursor": "pointer",
                        "text-decoration": "none",
                        "color": "#2c2a29"
                      },
                      "attributes": {
                        "target": "_blank",
                        "href": "=substring([$FileRef],0,lastIndexOf([$FileRef],'/'))",
                        "title": "Default View"
                      },
                      "txtContent": "View"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "font-size": "10px",
                    "font-weight": "600",
                    "text-align": "center",
                    "margin": "4px",
                    "padding": "5px"
                  },
                  "txtContent": ""
                }
              ]
            }
          ]
        }
      ]
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "#002855"
    }
  }
}