I've tried inserting this nice JSON Icon Progress Bar in my list view (thanks to this so useful page) but it does not display.
As I am in a view formatting, I have changed the fields @currentField by $Progression wich is the internal name of my "Number" column (I've double checked the internal name) under line 191.
As I can't find the solution despite long searches, could someone help me? Thank you.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"_comment_": "MAIN DIV",
"attributes": {
"class": "ms-bgColor-neutralLighter"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"align-items": "stretch",
"justify-content": "flex-start",
"flex-direction": "row",
"padding": "20px",
"margin-bottom": "16px",
"max-width": "1200px",
"border-radius": "8px"
},
"children": [
{
"elmType": "div",
"__comment": "GAUCHE",
"style": {
"flex-grow": "1",
"display": "inline-block",
"flex-direction": "column",
"flex-wrap": "nowrap",
"align-items": "left",
"max-width": "200px",
"min-width": "100px",
"margin-right": "95px",
"text-align": "left"
},
"children": [
{
"elmType": "span",
"txtContent": "=[$field_0]",
"style": {
"font-weight": "bold",
"font-size": "16px",
"color": "#FFFFFF",
"background-color": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$field_0]",
"One TSC"
]
},
"#FF7700",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$field_0]",
"Make or Buy"
]
},
"#50BE87",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$field_0]",
"Performance"
]
},
"#4BB4E6",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$field_0]",
"Formation - Consignes"
]
},
" #FFB4E6",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$field_0]",
"Poste de travail"
]
},
"#FFD200",
"#800080"
]
}
]
}
]
}
]
}
]
},
"border-radius": "20px",
"padding": "5px 10px"
}
},
{
"elmType": "div",
"txtContent": "=[$Title]",
"style": {
"font-weight": "bold",
"font-size": "16px",
"color": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$background-color]",
"#FF7700"
]
},
"#FF7700",
"#000000"
]
},
"white-space": "normal",
"padding-top": "20px",
"padding-left": "1px"
}
}
]
},
{
"elmType": "div",
"__comment": "MILIEU",
"style": {
"flex-grow": "1",
"display": "flex",
"flex-direction": "column",
"flex-wrap": "nowrap",
"align-items": "left",
"max-width": "400px",
"min-width": "205px"
},
"children": [
{
"elmType": "div",
"_comment": " DIV_ACTION",
"style": {
"display": "block"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "BullseyeTarget"
},
"style": {
"font-size": "14px",
"padding-right": "5px",
"color": "grey"
}
},
{
"elmType": "span",
"txtContent": "Action",
"style": {
"font-size": "14px",
"color": "grey"
}
},
{
"elmType": "span",
"txtContent": "=[$field_2]",
"style": {
"font-size": "14px",
"font-weight": "bold",
"white-space": "normal",
"word-break": "break-word",
"display": "-webkit-box",
"text-overflow": "ellipsis",
"overflow": "hidden",
"word-wrap": "break-word"
}
}
]
},
{
"elmType": "div",
"_comment": "DIV_DELAI",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "Calendar"
},
"style": {
"font-size": "14px",
"padding-right": "5px",
"color": "grey",
"padding-top": "20px"
}
},
{
"elmType": "span",
"txtContent": "Délai",
"style": {
"color": "grey",
"font-size": "14px"
}
},
{
"elmType": "p",
"attributes": {
"title": "[$field_3]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline"
},
"txtContent": "=if ([$field_3] == '', '–', [$field_3])",
"style": {
"font-weight": "bold",
"font-size": "14px"
}
},
{
"elmType": "div",
"_comment": "DIV_PROGRESSION",
"style": {
"display": "block"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Financial"
},
"style": {
"font-size": "14px",
"padding-right": "5px",
"color": "grey"
}
},
{
"elmType": "span",
"txtContent": "Avancement",
"style": {
"font-size": "14px",
"color": "grey"
}
},
{
"elmType": "div",
"style": {
"font-size": "16px"
},
"children": [
{
"elmType": "span",
"attributes": {
"title": "0-20%",
"iconName": "=if($Progression < 1, 'CircleRing', 'SkypeCircleCheck')",
"class": "='ms-fontColor-' + if($Progression == 1, 'green', if($Progression > 1, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 2",
"iconName": "=if($Progression < 2, 'CircleRing', 'SkypeCircleCheck')"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 3",
"iconName": "=if($Progression < 3, 'CircleRing', 'SkypeCircleCheck')",
"class": "='ms-fontColor-' + if($Progression == 3, 'green', if($Progression > 3, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 4",
"iconName": "=if($Progression < 4, 'CircleRing', 'SkypeCircleCheck')",
"class": "='ms-fontColor-' + if($Progression == 4, 'green', if($Progression > 4, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 5",
"iconName": "=if($Progression < 5, 'CircleRing', 'SkypeCircleCheck')",
"class": "='ms-fontColor-' + if($Progression == 5, 'green', if($Progression > 5, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
}
]
}
]
}
]
}
]
},
{
"elmType": "div",
"__comment": "DROITE",
"style": {
"flex-grow": "1",
"display": "flex",
"flex-direction": "column",
"flex-wrap": "nowrap",
"align-items": "left",
"max-width": "300px",
"min-width": "205px"
},
"children": [
{
"elmType": "div",
"_comment": " DIV_PORTEUR",
"style": {
"display": "block"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Telemarketer"
},
"style": {
"font-size": "14px",
"padding-right": "5px",
"color": "grey"
}
},
{
"elmType": "span",
"txtContent": "Porteur",
"style": {
"font-size": "14px",
"color": "grey"
}
},
{
"elmType": "span",
"txtContent": "=[$field_2]",
"style": {
"font-size": "14px",
"font-weight": "bold",
"white-space": "normal",
"word-break": "break-word",
"display": "-webkit-box",
"text-overflow": "ellipsis",
"overflow": "hidden",
"word-wrap": "break-word"
}
}
]
},
{
"elmType": "div",
"_comment": "DIV_CONTRIBUTEUR",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "Touch"
},
"style": {
"font-size": "14px",
"padding-right": "5px",
"color": "grey",
"padding-top": "20px"
}
},
{
"elmType": "span",
"txtContent": "Contributeur(s)",
"style": {
"color": "grey",
"font-size": "14px",
"padding-top": "20px"
}
},
{
"elmType": "p",
"attributes": {
"title": "[$field_6]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline"
},
"txtContent": "=if ([$field_6] == '', '–', [$field_6])",
"style": {
"height": "40px",
"font-weight": "bold",
"font-size": "14px"
}
}
]
}
]
}
]
}
}
[$Progression]instead of$Progressionat all the places in JSON. You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?. Let me know if it works for you or not.[$background-color]in SharePoint JSON formatting. You will have to use the same expression again incolorproperty.