JSON choice column conditional hyperlink formatting

%3CLINGO-SUB%20id%3D%22lingo-sub-1342960%22%20slang%3D%22en-US%22%3EJSON%20choice%20column%20conditional%20hyperlink%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1342960%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20there%20a%20way%20to%20make%20a%20Choice%20column%20have%20a%20static%20link%20only%20when%20'To%20Do'%20is%20selected%20(the%20default)%2C%20but%20not%20when%20'Complete'%20is%20selected%3F%20And%20then%20how%2Fwhere%20do%20I%20add%20the%20conditional%20div%2Foperator%20span%20colors%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHelp!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20gotten%20this%20far%2C%20but%20it%20currently%20does%20not%20open%20in%20a%20new%20window%2C%20and%20shows%20'Complete'%20as%20a%20404%20link.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%7B%0A%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%22elmType%22%3A%20%22a%22%2C%0A%20%20%22txtContent%22%3A%20%22%40currentField%22%2C%0A%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%22href%22%3A%20%22%3Dif(indexOf(join(%40currentField%2C'')%2C%20'To%20Do')%20!%3D-1%2C%20'%5Bstatic%20URL%5D'%2C'Complete')%22%2C%0A%20%20%20%20%22target%22%3A%20%22_blank%22%0A%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1342960%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1345950%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20choice%20column%20conditional%20hyperlink%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1345950%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F639401%22%20target%3D%22_blank%22%3E%40iparker%3C%2FA%3E%26nbsp%3BTry%20the%20attached%20JSON.%20You%20would%20get%20an%20image%20next%20to%20the%20to%20Do%20Item.%20On%20clicking%20that%20image%20you%20will%20be%20redirected%20to%20the%20page.%20You%20can%20also%20change%20the%20background%20of%20the%20to-do%20value..%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22box-sizing%22%3A%20%22border-box%22%2C%3CBR%20%2F%3E%22padding%22%3A%20%220%202px%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22class%22%3A%20%7B%3CBR%20%2F%3E%22operator%22%3A%20%22%3A%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22%3D%3D%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22toLowerCase%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%22%5B%24Status%5D%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22toLowerCase%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%22To%20Do%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22sp-css-backgroundColor-blockingBackground50%22%2C%3CBR%20%2F%3E%22sp-css-backgroundColor-neutralBackground%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22a%22%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22iconName%22%3A%20%7B%3CBR%20%2F%3E%22operator%22%3A%20%22%3A%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22%3D%3D%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22toLowerCase%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%22%5B%24Status%5D%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22toLowerCase%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%22To%20Do%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22ArrowUpRight8%22%2C%3CBR%20%2F%3E%22%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22class%22%3A%20%22sp-field-quickActions%22%2C%3CBR%20%2F%3E%22target%22%3A%20%22_blank%22%2C%3CBR%20%2F%3E%22href%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fwww.google.com%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.google.com%2F%3C%2FA%3E%22%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22class%22%3A%20%7B%3CBR%20%2F%3E%22operator%22%3A%20%22%3A%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22%3D%3D%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22toLowerCase%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%22%5B%24Status%5D%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22toLowerCase%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%22To%20Do%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22%22%2C%3CBR%20%2F%3E%22%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22span%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22padding%22%3A%20%220%202px%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%40currentField%22%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22class%22%3A%20%7B%3CBR%20%2F%3E%22operator%22%3A%20%22%3A%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22%3D%3D%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22toLowerCase%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%22%5B%24Status%5D%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22operator%22%3A%20%22toLowerCase%22%2C%3CBR%20%2F%3E%22operands%22%3A%20%5B%3CBR%20%2F%3E%22To%20Do%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22%22%2C%3CBR%20%2F%3E%22%22%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1346504%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20choice%20column%20conditional%20hyperlink%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1346504%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F184117%22%20target%3D%22_blank%22%3E%40Maruthi%20Gadde%3C%2FA%3EYou%20are%20a%20LEGEND.%20This%20is%20perfect%20and%20easy%20to%20edit%2C%20thank%20you!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1750619%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20choice%20column%20conditional%20hyperlink%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1750619%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20image%20didn't%20load%20for%20me...%20how%20can%20I%20reference%20the%20image%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Is there a way to make a Choice column have a static link only when 'To Do' is selected (the default), but not when 'Complete' is selected? And then how/where do I add the conditional div/operator span colors?

 

Help!

 

I've gotten this far, but it currently does not open in a new window, and shows 'Complete' as a 404 link.

 

 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "@currentField",
  "attributes": {
    "href": "=if(indexOf(join(@currentField,''), 'To Do') !=-1, '[static URL]','Complete')",
    "target": "_blank"
  }
}

 

 

 

 

3 Replies
Highlighted

@iparker Try the attached JSON. You would get an image next to the to Do Item. On clicking that image you will be redirected to the page. You can also change the background of the to-do value.. 

 

{
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"[$Status]"
]
},
{
"operator": "toLowerCase",
"operands": [
"To Do"
]
}
]
},
"sp-css-backgroundColor-blockingBackground50",
"sp-css-backgroundColor-neutralBackground"
]
}
},
"children": [
{
"elmType": "a",
"attributes": {
"iconName": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"[$Status]"
]
},
{
"operator": "toLowerCase",
"operands": [
"To Do"
]
}
]
},
"ArrowUpRight8",
""
]
},
"class": "sp-field-quickActions",
"target": "_blank",
"href": "https://www.google.com/"

},
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"[$Status]"
]
},
{
"operator": "toLowerCase",
"operands": [
"To Do"
]
}
]
},
"",
""
]
}
},

{
"elmType": "span",
"style": {
"padding": "0 2px"
},
"txtContent": "@currentField",
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"[$Status]"
]
},
{
"operator": "toLowerCase",
"operands": [
"To Do"
]
}
]
},
"",
""
]
}
}
}


]
}

Highlighted

@Maruthi GaddeYou are a LEGEND. This is perfect and easy to edit, thank you!

Highlighted

The image didn't load for me... how can I reference the image?