Forum Discussion
Icon Progress Bar JSON formatting not displaying in my view
Hello,
i've tried inserting that nice json Icon Progress Bar in my list view (thxs to this so useful page,)but it does not display.
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 ? Thxs
{
"$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": "#FF7700",
"border-radius": "20px",
"padding": "5px 10px"
}
},
{
"elmType": "div",
"txtContent": "=[$Title]",
"style": {
"font-weight": "bold",
"font-size": "16px",
"color": "#FF7700",
"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": "500px",
"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",
"padding-top": "20px"
}
},
{
"elmType": "p",
"attributes": {
"title": "[$field_3]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline"
},
"txtContent": "=if ([$field_3] == '', '–', [$field_3])",
"style": {
"height": "40px",
"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"
}
}
]
}
]
}
]
}
]
}
]
}
}
No RepliesBe the first to reply