SOLVED

Conditional Formatting to show multiple hyperlinks on one field

%3CLINGO-SUB%20id%3D%22lingo-sub-1584954%22%20slang%3D%22en-US%22%3EConditional%20Formatting%20to%20show%20multiple%20hyperlinks%20on%20one%20field%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1584954%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWondering%20if%20the%20following%20is%20possible%3F%3C%2FP%3E%3CP%3EI%20have%20a%20list%20in%20SharePoint%20Online%20storing%20the%20domains%20that%20are%20owned%20by%20the%20company.%20Against%20each%20one%20I%20want%20links%20to%20open%20various%20hyperlinks%20to%20test%20if%20the%20domain%20is%20set%20up%20correctly%2C%20or%20run%20tests%2C%20get%20WHOIS%20info%20etc.%20Currently%20I%20have%20added%20text%20columns%20for%20Domain%20Check%2C%20Whois%20and%20WWW%20Link%20that%20have%20no%20content%20and%20just%20generate%20the%20hyperlinks%20based%20on%20the%20column%20format%20JSON%20referring%20to%20the%20Domain%20Name%20field%20(Title).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22domains.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F212083i2A60FCBCD0FEFB60%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22domains.png%22%20alt%3D%22domains.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EWhat%20I%20would%20like%20to%20do%20is%20have%20a%20single%20field%20called%20Actions%2C%20that%20contains%20multiple%20'nicely%20formatted'%20hyperlinks%20(coloured%20pill%20format%20would%20be%20great)%20that%20are%20automatically%20generated%20based%20on%20the%20Domain%20Name%20field.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20can't%20find%20any%20samples%20showing%20this%20although%20I'm%20sure%20some%20clever%20person%20can%20provide%20the%20answer.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20reference%2C%20I'm%20using%20the%20following%20column%20formatting%20to%20build%20the%20domain%20check%2C%20whois%20and%20WWW%20link%20fields%20hyperlinks%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3CU%3E%3CSTRONG%3EDomain%20Check%3A%3C%2FSTRONG%3E%3C%2FU%3E%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%22elmType%22%3A%20%22a%22%2C%0A%20%20%22txtContent%22%3A%20%22Domain%20Check%22%2C%0A%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%22target%22%3A%20%22_blank%22%2C%0A%20%20%20%20%22href%22%3A%20%22%3D'https%3A%2F%2Fwww.mxtoolbox.com%2Fdomain%2F'%20%2B%20%5B%24Title%5D%22%0A%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3CU%3E%3CSTRONG%3EWhoIs%3A%3C%2FSTRONG%3E%3C%2FU%3E%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%22elmType%22%3A%20%22a%22%2C%0A%20%20%22txtContent%22%3A%20%22WHOIS%22%2C%0A%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%22target%22%3A%20%22_blank%22%2C%0A%20%20%20%20%22href%22%3A%20%22%3D'https%3A%2F%2Fwho.is%2Fwhois%2F'%20%2B%20%5B%24Title%5D%22%0A%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3CU%3E%3CSTRONG%3EWWW%20Link%3A%3C%2FSTRONG%3E%3C%2FU%3E%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%22elmType%22%3A%20%22a%22%2C%0A%20%20%22txtContent%22%3A%20%22%3D'www.'%20%2B%20%5B%24Title%5D%22%2C%0A%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%22target%22%3A%20%22_blank%22%2C%0A%20%20%20%20%22href%22%3A%20%22%3D'http%3A%2F%2Fwww.'%20%2B%20%5B%24Title%5D%22%0A%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3BThanks%20in%20advance.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlex%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1584954%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Lists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
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"
    }
  }
}