Forum Discussion

Copper Contributor

Oct 13, 2020

Solved

Person-Hover-card Issue

I've got two lists (on different sites). One works beautifully using the Person-Hover-Card JSON: One doesn't work at all: Any ideas what's fouling it up? I'm assuming some sort o...

SharePoint Online

ganeshsanap

Oct 13, 2020

Chauc3r , Use below code to apply JSON to Created By field:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px"
      },
      "attributes": {
        "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$Author.email]",
        "title": "[$Author.title]"
      }
    },
    {
      "elmType": "span",
      "style": {
        "vertical-align": "middle",
        "margin-left": "2px"
      },
      "txtContent": "[$Author.title]"
    }
  ],
  "defaultHoverField": "[$Author]"
}

Please click Mark as Best Response if my post helped you solve your issue. This will help others find the correct solution easily. It also closes the item. If the content was useful in other ways, please consider giving it Like.

Chauc3r

Copper Contributor

Oct 13, 2020

ganeshsanap
I hope not - copied directly from github!

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px"
      },
      "attributes": {
        "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$Editor.email]",
        "title": "[$Editor.title]"
      }
    },
    {
      "elmType": "span",
      "style": {
        "vertical-align": "middle",
        "margin-left": "2px"
      },
      "txtContent": "[$Editor.title]"
    }
  ],
  "defaultHoverField": "[$Editor]"
}

Thanks

ganeshsanap

MVP

Oct 13, 2020

Chauc3r , Use below code to apply JSON to Created By field:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px"
      },
      "attributes": {
        "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$Author.email]",
        "title": "[$Author.title]"
      }
    },
    {
      "elmType": "span",
      "style": {
        "vertical-align": "middle",
        "margin-left": "2px"
      },
      "txtContent": "[$Author.title]"
    }
  ],
  "defaultHoverField": "[$Author]"
}

Chauc3r
Copper Contributor
Oct 13, 2020
ganeshsanap That's worked perfectly, thank you.

Author, not Editor? That seems to be the only change?
- ganeshsanap
  MVP
  Oct 13, 2020
  Chauc3r, Yes, $Author is internal name of Created By column and $Editor is internal name of Modified By field. So, only the single change of internal name was required.
  Please consider giving a Like if my post helped you in any way. For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs
  - Chauc3r
    Copper Contributor
    Oct 13, 2020
    Thanks ganeshsanap - made a real difference that!
    
    I've got a 'Last Edited' column that is of type Person/Group, that copies the person from the 'Modified By' column (There's a flow running on create/modify item - so I check the 'Modified By' column and only run the flow if that is not me (The 'system' user)).
    
    Is there anyway of displaying the stored person using a hover card? At the moment it's just showing the creator of the column (i.e. $Author - $Editor still comes up blank).
    
    Thanks