Icon Progress Bar JSON formatting not displaying in my view

Copper Contributor

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"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

 

 

0 Replies