Resources: https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples
Turn choice field into a link
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "a",
"txtContent": "@currentField",
"attributes": {
"href": "='https://site/Lists/listName/AllItems.aspx?FilterField1=FileID&FilterValue1='+[$ID]",
"target": "_blank"
}
}
turn choice into colored boxes
Column settings -> Format this Column -> Background Colors -> Edit Styles
-> 
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Not Started"
]
},
"sp-css-backgroundColor-blueBackground37",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Active"
]
},
"sp-css-backgroundColor-warningBackground50",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Resolved"
]
},
"sp-css-backgroundColor-successBackground50",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Closed"
]
},
"sp-css-backgroundColor-neutralBackground30",
""
]
}
]
}
]
}
]
}
},
"children": [
{
"elmType": "span",
"style": {
"line-height": "16px",
"height": "14px"
},
"attributes": {
"iconName": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Not Started"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Active"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Resolved"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Closed"
]
},
"",
""
]
}
]
}
]
}
]
}
}
},
{
"elmType": "span",
"style": {
"overflow": "hidden",
"text-overflow": "ellipsis",
"padding": "0 3px"
},
"txtContent": "[$StatusLinktoTask]",
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Not Started"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Active"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Resolved"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$StatusLinktoTask]",
"Closed"
]
},
"",
""
]
}
]
}
]
}
]
}
}
}
]
}
colored choice field into link
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"style": {
"box-sizing": "border-box",
"padding": "0 2px"
},
"attributes": {
"href": "='https://site/Lists/listName/AllItems.aspx?FilterField1=FileID&FilterValue1='+[$ID]",
"target": "_blank",
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Not Started"
]
},
"sp-css-backgroundColor-blueBackground37",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Active"
]
},
"sp-css-backgroundColor-warningBackground50",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Resolved"
]
},
"sp-css-backgroundColor-successBackground50",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Closed"
]
},
"sp-css-backgroundColor-neutralBackground30",
""
]
}
]
}
]
}
]
}
},
"children": [
{
"elmType": "span",
"style": {
"line-height": "16px",
"height": "14px"
},
"attributes": {
"iconName": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Not Started"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Active"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Resolved"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Closed"
]
},
"",
""
]
}
]
}
]
}
]
}
}
},
{
"elmType": "span",
"style": {
"overflow": "hidden",
"text-overflow": "ellipsis",
"padding": "0 3px"
},
"txtContent": "[$Status]",
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Not Started"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Active"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Resolved"
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Closed"
]
},
"",
""
]
}
]
}
]
}
]
}
}
}
]
}
