Feb 24 2020 02:02 PM
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:
Feb 24 2020 11:46 PM
Solution@AngeloEG So there are few things to mention:
.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": "/"
}
}
]
}
Feb 25 2020 06:38 AM
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.
Feb 25 2020 06:48 AM
@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.
Feb 25 2020 09:16 AM
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"
]
}
}
}
]
}
Feb 24 2020 11:46 PM
Solution@AngeloEG So there are few things to mention:
.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": "/"
}
}
]
}