Closed Michal-Ziemba closed 1 year ago
Michal-Ziemba
commented
1 year ago Got it. This JSON should apply to view format, not a column. And it works \o/ But this is not the solution I was looking for. Do you know how to format the column to traffic lights with a slider that can be used to switch from green to yellow to red?
aaclage
commented
1 year ago Hi @Michal-Ziemba
Thank you for the feedback,
Regarding to display in column, have a discussion that you can change to include in the column if needed. https://github.com/pnp/List-Formatting/issues/582
Below other sample with color change on option selected based on column "Rate" and uses List View to display. Can help you to customize the way you want.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"padding": "30px",
"border": "1px solid #ccc",
"box-shadow": "0 0 5px #ccc"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "inline-block",
"padding": "0px 0px 20px 10px"
},
"txtContent": "Your mood for today?",
"attributes": {
"class": "ms-fontSize-20"
},
"children": [
{
"elmType": "div"
}
]
},
{
"elmType": "div",
"style": {
"display": "inline-block",
"padding-left": "80px"
},
"attributes": {
"class": "ms-fontSize-14"
},
"txtContent": "=if([$Rate] ==0,'No more ☕ anarchy in the 🌎!!!',if([$Rate] ==1,'I have seen better days.',if([$Rate] ==2,'Hello you are not alone.',if([$Rate] ==3,'I have super plans for the day!',if([$Rate] ==4,'SharePoint Designer is still a thing!!!','')))))"
}
]
},
{
"elmType": "div",
"style": {
"display": "flex"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-fontSize-42"
},
"txtContent": "=if([$Rate] ==0,'😡',if([$Rate] ==1,'🙁',if([$Rate] ==2,'🙂',if([$Rate] ==3,'😃',if([$Rate] ==4,'🤣','')))))"
},
{
"elmType": "div",
"style": {
"padding-left": "20px",
"display": "flex",
"justify-content": "center",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"background-color": "#eee",
"border-radius": "25px",
"width": "380px",
"display": "table"
},
"attributes": {},
"children": [
{
"elmType": "div",
"style": {
"display": "table-cell",
"background-color": "=if([$Rate]==0,'#FF2C05',if([$Rate]==1,'#FD6104',if([$Rate]==2,'#FD9A01',if([$Rate]==3,'#FFCE03',if([$Rate]==4,'#FEF001','Orange'))))",
"width": "=if(length([$Rate])==0 || [$Rate]==0 ,'0px',if([$Rate]==1 ,'100px',if([$Rate]==2 ,'190px',if([$Rate]==3 ,'280px',if([$Rate]==4 ,'380px','0px')))))",
"height": "13px",
"padding-left": "5px",
"border-radius": "25px",
"vertical-align": "middle",
"text-align": "left"
},
"children": [
{
"elmType": "div",
"style": {
"display": "=if(length([$Rate])==0 || [$Rate]==0 ,'none','inline-block')",
"background-color": "white",
"border-radius": "5px",
"height": "10px",
"width": "10px",
"cursor": "pointer"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Rate": "0"
}
}
},
{
"elmType": "div",
"style": {
"display": "=if([$Rate]>=1,'inline-block' ,'none')",
"background-color": "white",
"border-radius": "5px",
"height": "10px",
"width": "10px",
"margin-left": "80px",
"cursor": "pointer"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Rate": "1"
}
}
},
{
"elmType": "div",
"style": {
"display": "=if([$Rate]>=2 ,'inline-block' ,'none')",
"background-color": "white",
"border-radius": "5px",
"height": "10px",
"width": "10px",
"margin-left": "80px",
"cursor": "pointer"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Rate": "2"
}
}
},
{
"elmType": "div",
"style": {
"display": "=if(Number([$Rate]>=3) ,'inline-block' ,'none')",
"background-color": "white",
"border-radius": "5px",
"height": "10px",
"width": "10px",
"margin-left": "80px",
"cursor": "pointer"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Rate": "3"
}
}
},
{
"elmType": "div",
"style": {
"display": "=if([$Rate]>=4 ,'inline-block' ,'none')",
"background-color": "white",
"border-radius": "5px",
"height": "10px",
"width": "10px",
"margin-left": "80px",
"cursor": "pointer"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Rate": "4"
}
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"border": "2px solid #eee",
"display": "inline-block",
"background-color": "white",
"border-radius": "50%",
"height": "40px",
"width": "40px",
"box-shadow": "0 0 5px #eee",
"margin-left": "=if([$Rate]==0,'-20px','-23px')",
"margin-top": "=if([$Rate]==0,'-23px','-15px')"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "=if([$Rate]==0 ,'inline-block','none')",
"background-color": "white",
"border-radius": "5px",
"height": "10px",
"width": "10px",
"cursor": "pointer"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Rate": "0"
}
}
},
{
"elmType": "div",
"style": {
"display": "=if([$Rate]>=1 ,'none','inline-block')",
"background-color": "white",
"border-radius": "5px",
"height": "10px",
"width": "10px",
"margin-left": "80px",
"cursor": "pointer"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Rate": "1"
}
}
},
{
"elmType": "div",
"style": {
"display": "=if([$Rate]>=2 ,'none','inline-block')",
"background-color": "white",
"border-radius": "5px",
"height": "10px",
"width": "10px",
"margin-left": "80px",
"cursor": "pointer"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Rate": "2"
}
}
},
{
"elmType": "div",
"style": {
"display": "=if([$Rate]>=3 ,'none','inline-block')",
"background-color": "white",
"border-radius": "5px",
"height": "10px",
"width": "10px",
"margin-left": "80px",
"cursor": "pointer"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Rate": "3"
}
}
},
{
"elmType": "div",
"style": {
"display": "=if([$Rate]==4 ,'none','inline-block')",
"background-color": "white",
"border-radius": "5px",
"height": "10px",
"width": "10px",
"margin-left": "80px",
"cursor": "pointer"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Rate": "4"
}
}
}
]
}
]
}
]
}
]
}
]
}
]
}
}Thank you
Sample (which sample are you talking about)
https://github.com/pnp/List-Formatting/tree/master/view-samples/bar-option-picker
Question (the more details, the better)
Hi @aaclage can you explain how to apply the bar option picker for newbies like me, please? I do as follow:
When I entered a title, and value (0 or 1 or 2 and so on), the value disappears from the view but the bar is not visible. I am using a standard list view. Do I do something wrong?
I was going to use the format for the project indicator status which would be brilliant and easy to use by our PMO unless you have a better solution for the KPI traffic light status indicator.
Thanks for your help /Mike