0

I am using Sharepoint list JSON view-formatting and want a list of names to each show their live persona card on hover. I can get this to work for just one name, but when I use forEach I cannot get the hover action to work. Is this a bug/not yet possible or am I doing something wrong?

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "float": "left",
      "flex-direction": "column",
      "width": "320px",
      "margin-right": "15px",
      "margin-bottom": "15px",
      "border-style": "solid"
    },
    "children": [
      {
        "elmType": "div",
        "forEach": "person in [$an6t]",
        "children": [
          {
            "elmType": "a",
            "txtContent": "[$person.title]",
            "defaultHoverField": "[$person]",
            "style": {
              "cursor": "pointer",
              "box-sizing": "border-box",
              "color": "black",
              "text-decoration": "none"
            }
          }
        ]
      }
    ]
  }
}
0

Please try the following JSON format using forEach:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "forEach": "personIterator in @currentField",
      "elmType": "div",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px",
        "display": "=if(loopIndex('personIterator') >= 3, 'none', '')"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",
            "title": "[$personIterator.title]"
          },
          "style": {
            "position": "relative",
            "top": "50%",
            "left": "50%",
            "width": "100%",
            "height": "auto",
            "margin-left": "-50%",
            "margin-top": "-50%",
            "display": "=if(length(@currentField) > 3 && loopIndex('personIterator') >= 2, 'none', '')"
          }
        },
        {
          "elmType": "div",
          "attributes": {
            "title": "=join(@currentField.title, ', ')",
            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"
          },
          "style": {
            "width": "100%",
            "height": "100%",
            "text-align": "center",
            "line-height": "30px",
            "font-size": "14px",
            "display": "=if(length(@currentField) > 3 && loopIndex('personIterator') == 2, '', 'none')"
          },
          "children": [
            {
              "elmType": "span",
              "txtContent": "='+' + toString(length(@currentField) - (2))"
            }
          ]
        }
      ],
    "defaultHoverField": "[$personIterator]"
    }
  ]
}

Reference:

https://thechriskent.com/2019/04/04/generate-list-formatting-elements-in-a-loop-using-foreach/

  • This works when just applied to one column using row formatting, however I'm using view formatting for the whole row and when this code is applied to that it doesn't work (will update code in question now!) – Wicket_IV Jun 9 '20 at 8:25
0

I didn't change my code and now it works, it must've been patched since I asked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.