Thank you for visiting my site!

Home / Lists / Column Formatting – Turn Choice field values into hyperlinks

Column Formatting – Turn Choice field values into hyperlinks

Resources: https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples

Turn choice field into a link

[code] {
"$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"
}
}
[/code]

turn choice into colored boxes
Column settings -> Format this Column -> Background Colors -> Edit Styles

->

 

[code] {
"$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"
] },
"",
""
] }
] }
] }
] }
}
}
] }

[/code]

colored choice field into link

[code lang=”javascript” highlight=”3,9,10″ toolbar=”true”] {
"$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"
] },
"",
""
] }
] }
] }
] }
}
}
] }
[/code]

ADD YOUR COMMENT