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-trending--down class but if I use the sp-field-quickActions, it simply ignores it and displays as a regular ugly blue/purple hyperlink. I want to use a red or blue color (no ugly underline and make it a little bit bigger), any help would be greatly appreciated.

Here's the code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "debugMode": true,
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "style": {
        "padding-right": "8px"
      },
      "txtContent": "[$ID]"
    },
    {
      "elmType": "a",
      "attributes": {
        "iconName": "=if([$Tasks_x0020_List] > 0,'TaskLogo', '')",
        "class": "sp-field-quickActions",
        "target": "_blank",
        "href": {
          "operator": "+",
          "operands": [
            "https://-----.sharepoint.com/eQMS/Lists/Customer%20Complaints%20Tasks/AllItems.aspx#InplviewHash2000000e63d8bd3fdec=FilterField1%3DComplaint%255Fx0020%255FID-FilterValue1%3D",
            "[$ID]"
          ]
        }
      }
    }
  ]
}

Here's the result:

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.

Forum Discussion

JSON Clickable Action and sp-field-quickActions

Share

Resources