Resources: https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples
{ "$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" ] }, "", "" ] } ] } ] } ] } } } ] }