search

pnp / List-Formatting

List Formatting Samples for use in SharePoint and Microsoft Lists
https://pnp.github.io/List-Formatting/
MIT License
1.7k stars 822 forks source link

I have a question about SAMPLE - Custom-Hover-Card #707

Closed rp1xlox77 closed 8 months ago

rp1xlox77 commented 10 months ago

Hello,

I am currently attempting to use this custom hover card to use as a status quick view of sorts but cant seem to get the fields to show correctly when each step in the status is completed. As it does in the reference here: https://github.com/pnp/List-Formatting/tree/master/column-samples/custom-hover-card

Thank you in advance for any help!

Screen shot of hover card.

screenshot1

My code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "12px"
  },
  "txtContent": "[$Status]",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "padding": "15px 45px 15px 15px"
              },
              "children": [
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "18px",
                        "font-weight": "550",
                        "text-align": "center",
                        "margin-bottom": "10px"
                      },
                      "txtContent": "Patriot Details"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "StatusCircleCheckmark",
                        "class": "ms-fontColor-green"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "ms-fontColor-green"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 0, '16px', ''",
                        "font-weight": "=if([$StatusCode] > 0, '600', ''",
                        "padding-left": "9px"
                      },
                      "txtContent": "In Bake-Out!",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0, 'green', 'green')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0, 'black', 'black')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "border-left-style": "solid",
                        "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')",
                        "text-align": "center",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "=if([$StatusCode] > 0, 'StatusCircleCheckmark', 'CircleRing')",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 0, '16px', ''",
                        "font-weight": "=if([$StatusCode] > 0, '600', ''",
                        "padding-left": "9px"
                      },
                      "txtContent": "Initial Package",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center",
                        "border-left-style": "solid",
                        "border-left-color": "=if([$StatusCode] > 1,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0, 'black', 'black')"
                      },
                      "txtContent": "[$InitialPackDate]"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "border-left-style": "solid",
                        "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "=if([$StatusCode] > 1, 'StatusCircleCheckmark', 'CircleRing')",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 1, '16px', ''",
                        "font-weight": "=if([$StatusCode] > 1, '600', ''",
                        "padding-left": "9px"
                      },
                      "txtContent": "Initial Test",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center",
                        "border-left-style": "solid",
                        "border-left-color": "=if([$StatusCode] > 2,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 1, 'black', 'black')"
                      },
                      "txtContent": "[$InitialTestDate]"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "border-left-style": "solid",
                        "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "=if([$StatusCode] > 2, 'StatusCircleCheckmark', 'CircleRing')",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 2, '16px', ''",
                        "font-weight": "=if([$StatusCode] > 2, '600', ''",
                        "padding-left": "9px"
                      },
                      "txtContent": "Mid Package",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center",
                        "border-left-style": "solid",
                        "border-left-color": "=if([$StatusCode] > 3,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2, 'black', 'black')"
                      },
                      "txtContent": "[$MidPackDate]"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "border-left-style": "solid",
                        "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "=if([$StatusCode] > 2, 'StatusCircleCheckmark', 'CircleRing')",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 2, '16px', ''",
                        "font-weight": "=if([$StatusCode] > 2, '600', ''",
                        "padding-left": "9px"
                      },
                      "txtContent": "Final Test",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center",
                        "border-left-style": "solid",
                        "border-left-color": "=if([$StatusCode] > 3,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2, 'black', 'black')"
                      },
                      "txtContent": "[$FinalTestDate]"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "border-left-style": "solid",
                        "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "=if([$StatusCode] > 2, 'StatusCircleCheckmark', 'CircleRing')",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 2, '16px', ''",
                        "font-weight": "=if([$StatusCode] > 2, '600', ''",
                        "padding-left": "9px"
                      },
                      "txtContent": "Final Package",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center",
                        "border-left-style": "solid",
                        "border-left-color": "=if([$StatusCode] > 3,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2, 'black', 'black')"
                      },
                      "txtContent": "[$FinalPackDate]"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "border-left-style": "solid",
                        "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "=if([$StatusCode] > 3, 'StatusCircleCheckmark', 'CircleRing')",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 3, '16px', ''",
                        "font-weight": "=if([$StatusCode] > 3, '600', ''",
                        "padding-left": "9px"
                      },
                      "txtContent": "Shipped!",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 3, 'black', 'black')"
                      },
                      "txtContent": "[$ACTUAL SHIP DATE]"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true
  }
}
tecchan1107 commented 9 months ago

Sorry for the delay in commenting😢

If you do not see the value of a field in the formatting, please check the following

tecchan1107 commented 8 months ago

Since there seems to be no reply, I will close it. If you have any questions, sorry, but please create a new issue again.