Forum Discussion

Copper Contributor

Feb 24, 2020

Solved

JSON Clickable Action and sp-field-quickActions

Hi, I'm trying to format a quickfield action to open a task view link. Everything works as intended but I can't format the icon; the most it does is change to red when using the sp-field-tren...

Feb 25, 2020

AngeloEG So there are few things to mention:

sp-field-quickActions class does not exist - there is only sp-field-quickAction, but this does not matter.
These are the properties you will find in quickAction

.sp-field-quickAction {
  padding: 0;
}
[dir="ltr"] .sp-field-quickAction {
  padding-left: 8px;
}
[dir="rtl"] .sp-field-quickAction {
  padding-right: 8px;
}

So literally nothing that could make your icon more colorful.

3. You render <A/> and you get OOTB browser experience, that is why you get treatment with underline and colors for :visited

You can use something like this to get you started, and use fonts and colors right:

    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "debugMode": true,
    "elmType": "div",
    "children": [
      {
        "elmType": "span",
        "txtContent": "Whatever",
        "attributes": {
            "class": "sp-field-quickAction"
        }
      },
      {
        "elmType": "a",
        "style":{
            "text-decoration": "inherit",
            "color": "inherit",
            "font-size": "inherit",
            "font-weight":"inherit"
        },
        "attributes": {
          "class": "sp-field-quickAction sp-field-iconRightAligned",
          "iconName": "TaskLogo",
          "target": "_blank",
          "href": "/"
        }
      }
    ]
  }

orchee

Iron Contributor

Feb 25, 2020

AngeloEG So there are few things to mention:

sp-field-quickActions class does not exist - there is only sp-field-quickAction, but this does not matter.
These are the properties you will find in quickAction

.sp-field-quickAction {
  padding: 0;
}
[dir="ltr"] .sp-field-quickAction {
  padding-left: 8px;
}
[dir="rtl"] .sp-field-quickAction {
  padding-right: 8px;
}

So literally nothing that could make your icon more colorful.

3. You render <A/> and you get OOTB browser experience, that is why you get treatment with underline and colors for :visited

You can use something like this to get you started, and use fonts and colors right:

    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "debugMode": true,
    "elmType": "div",
    "children": [
      {
        "elmType": "span",
        "txtContent": "Whatever",
        "attributes": {
            "class": "sp-field-quickAction"
        }
      },
      {
        "elmType": "a",
        "style":{
            "text-decoration": "inherit",
            "color": "inherit",
            "font-size": "inherit",
            "font-weight":"inherit"
        },
        "attributes": {
          "class": "sp-field-quickAction sp-field-iconRightAligned",
          "iconName": "TaskLogo",
          "target": "_blank",
          "href": "/"
        }
      }
    ]
  }

AngeloEG

Copper Contributor

Feb 25, 2020

Thank you very much orchee that solved the problem! Yous insight is most appreciated.

Quick, question, where did you find the definition for the classes? I tried inspecting the webpage but ended up with a blob of definitions, so it was trying to find a needle on a haystack.

orchee

Iron Contributor

Feb 25, 2020

AngeloEGHappy to hear that!

I'm sorry to disappoint you, but I do not have any special access to css files, I'm using source code and find function, the only tip I can give is to copy whole <style> sections to VS Code and prettify it for some clarity.

AngeloEG

Copper Contributor

Feb 25, 2020

A special thanks to orchee for his help.

As reference, this is how it ended up looking, nice blue and red icons:

Here's the code from above as reference to anyone looking to do something similar; the icons display only when the record has a link to a separate list (either tasks or email records in my case):

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "debugMode": true,
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": "sp-field-quickAction"
      },
      "txtContent": "[$ID]"
    },
    {
      "elmType": "a",
      "style": {
        "text-decoration": "inherit",
        "color": "#3f72af",
        "font-size": "1.3em",
        "font-weight": "inherit"
      },
      "attributes": {
        "class": "sp-field-quickAction sp-field-iconRightAligned",
        "iconName": "=if([$Tasks_x0020_List] > 0,'TaskLogo', '')",
        "target": "_blank",
        "href": {
          "operator": "+",
          "operands": [
            "https://---.sharepoint.com/eQMS/Lists/Customer%20Complaints%20Tasks/AllItems.aspx#InplviewHash-47e6-aa73-e63d8bd3fdec=FilterField1%3DComplaint%255Fx0020%255FID-FilterValue1%3D",
            "[$ID]"
          ]
        }
      }
    },
    {
      "elmType": "a",
      "style": {
        "text-decoration": "inherit",
        "color": "#f6416c",
        "font-size": "1.3em",
        "font-weight": "inherit"
      },
      "attributes": {
        "iconName": "=if([$eMails_x0020_List] > 0,'Mail', '')",
        "class": "sp-field-quickAction sp-field-iconRightAligned",
        "target": "_blank",
        "href": {
          "operator": "+",
          "operands": [
            "https://---.sharepoint.com/eQMS/Lists/Customer%20Complaints%20eMails/Complaint%20Grouped.aspx?FilterField1=Complaint%5Fx0020%5FID&FilterValue1=",
            "[$ID]",
            "&FilterType1=Lookup&viewid=a9e%2D7f01891666a0"
          ]
        }
      }
    }
  ]
}