Forum Discussion
JSON in hyperlink formatted column
I just need to know if it's possible to have this JSON work for a hyperlink column. The hyperlink button works but the color if the column is populated does not. The color coding works on other columns in other formats, but doesn't seem to work for a hyperlink unless my coding here is incorrect?
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "=join(@currentField, '\n')",
"style": {
"background-color": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": ["@currentField", "SessionSchedule"]
},
"",
"#FFCE33"
]
}
},
"children": [
{
"elmType": "a",
"txtContent": "Edit",
"attributes": {
"http://URL redacted for security
": "='https://example.sharepoint.com/Lists/Button Demo/editform.aspx?ID=' + [$ID]"
},
"style": {
"padding": "0px 25px",
"cursor": "pointer",
"border": "none",
"color": "white",
"font-weight": "550",
"background-color": "#0078d4",
"text-decoration": "none",
"font-size": "14px",
"text-align": "center",
"width": "25px"
}
}
]
}
The @currentField in a hyperlink column is actually an object, not a simple string. So when you try to compare it directly to "SessionSchedule", the condition doesn’t evaluate as expected. That’s why your background-color logic isn’t triggering; and it’s trying to compare an object to a string.
"background-color": { "operator": "?", "operands": [ { "operator": "==", "operands": ["@currentField.description", "SessionSchedule"] }, "#FFCE33", "" ] }This checks the description of the hyperlink (the display text) and applies the yellow background if it matches "SessionSchedule".
If you want to style the actual link (<a>), you can also apply conditional logic inside the style of the elmType: "a" block - just make sure you're referencing the correct property.
2 Replies
The @currentField in a hyperlink column is actually an object, not a simple string. So when you try to compare it directly to "SessionSchedule", the condition doesn’t evaluate as expected. That’s why your background-color logic isn’t triggering; and it’s trying to compare an object to a string.
"background-color": { "operator": "?", "operands": [ { "operator": "==", "operands": ["@currentField.description", "SessionSchedule"] }, "#FFCE33", "" ] }This checks the description of the hyperlink (the display text) and applies the yellow background if it matches "SessionSchedule".
If you want to style the actual link (<a>), you can also apply conditional logic inside the style of the elmType: "a" block - just make sure you're referencing the correct property.
You can create a hyperlink column by configuring elmType as a in JSON format and setting attributes/href.
