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"
            }
          }
        ]
      }
    ]
  }
}
Improve this question

2 Answers 2

Reset to default
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/

Improve this answer
1
  • 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
    Commented Jun 9, 2020 at 8:25
0

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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