Setting the background in JSON Formatting column to red
-
08-02-2021 - |
문제
I have a field in SPOnline I want set to red to show against a progress bar. I thought it would be a matter of just adding a BG colour line but it hasn't worked. Any ideas? JSON below. Thanks in advance.
{
"background":"**#ff0000**",
"elmType":"div",
"children":[
{
"elmType":"span",
"txtContent":{
"operator":"+",
"operands":[
{
"operator":"*",
"operands":[
"@currentField",
100
]
},
" %"
]
},
"style":{
"background-color":{
"operator":"?",
"operands":[
{
"operator":"<=",
"operands":[
"@currentField",
0.33
]
},
"#ffa500",
{
"operator":"?",
"operands":[
{
"operator":"<=",
"operands":[
"@currentField",
0.66
]
},
"#ffff00",
"#00ff00"
]
}
]
},
"width":{
"operator":"+",
"operands":[
{
"operator":"*",
"operands":[
"@currentField",
100
]
},
"%"
]
},
"text-align":"center",
"white-space": "nowrap"
}
}
]
}
해결책
Change the code in the first line to this: "style": { "background-color":"#ff0000"},
{
"style": { "background-color":"#ff0000" },
"elmType":"div",
"children":[
{
"elmType":"span",
"txtContent":{
"operator":"+",
"operands":[
{
"operator":"*",
"operands":[
"@currentField",
100
]
},
" %"
]
},
"style":{
"background-color":{
"operator":"?",
"operands":[
{
"operator":"<=",
"operands":[
"@currentField",
0.33
]
},
"#ffa500",
{
"operator":"?",
"operands":[
{
"operator":"<=",
"operands":[
"@currentField",
0.66
]
},
"#ffff00",
"#00ff00"
]
}
]
},
"width":{
"operator":"+",
"operands":[
{
"operator":"*",
"operands":[
"@currentField",
100
]
},
"%"
]
},
"text-align":"center",
"white-space": "nowrap"
}
}
]
}
다른 팁
You need to add a style element to the top div element. See below:
{
"elmType":"div",
"style": { "background-color":"red" },
"children":[
{
"elmType":"span",
"txtContent":{
"operator":"+",
"operands":[
.....
Update: OP commented that only whats not already filled with green in the example should be red. This following code should do that:
{
"elmType":"div",
"children":[
{
"elmType":"span",
"style":{
"width":"100%",
"background-color":"red"},
"children": [
{
"elmType":"span",
"txtContent":{
"operator":"+",
"operands":[
{
"operator":"*",
"operands":[
"@currentField",
100
]
},
" %"
]
},
"style":{
"background-color":{
"operator":"?",
"operands":[
{
"operator":"<=",
"operands":[
"@currentField",
0.33
]
},
"#ffa500",
{
"operator":"?",
"operands":[
{
"operator":"<=",
"operands":[
"@currentField",
0.66
]
},
"#ffff00",
"#00ff00"
]
}
]
},
"width":{
"operator":"+",
"operands":[
{
"operator":"*",
"operands":[
"@currentField",
100
]
},
"%"
]
},
"text-align":"center",
"white-space": "nowrap",
"display": "block"
}
}
]
}
]
}
Screenshot:
제휴하지 않습니다 sharepoint.stackexchange