SOLVED

Person-Hover-card Issue

%3CLINGO-SUB%20id%3D%22lingo-sub-1773716%22%20slang%3D%22en-US%22%3EPerson-Hover-card%20Issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1773716%22%20slang%3D%22en-US%22%3E%3CP%3EI've%20got%20two%20lists%20(on%20different%20sites).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOne%20works%20beautifully%20using%20the%20Person-Hover-Card%20JSON%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22yes.png%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F226213iC4BBD1A9AD25BBC5%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20role%3D%22button%22%20title%3D%22yes.png%22%20alt%3D%22yes.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EOne%20doesn't%20work%20at%20all%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22no.png%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F226214i429A1C744A48F72D%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20role%3D%22button%22%20title%3D%22no.png%22%20alt%3D%22no.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20ideas%20what's%20fouling%20it%20up%3F%20I'm%20assuming%20some%20sort%20of%20global%20setting%20somewhere%3F%3C%2FP%3E%3CP%3EThanks!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1773716%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1773796%22%20slang%3D%22en-US%22%3ERe%3A%20Person-Hover-card%20Issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1773796%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F746338%22%20target%3D%22_blank%22%3E%40Chauc3r%3C%2FA%3E%26nbsp%3B%2C%20Can%20you%20please%20add%20the%20JSON%20you%20are%20using%20to%20your%20question%3F%3C%2FP%3E%3CP%3EIt%20will%20be%20easier%20for%20us%20to%20see%20if%20there%20is%20any%20error%20in%20your%20JSON%20code%20and%20answer%20your%20question.%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%20%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20solve%20your%20issue.%20This%20will%20help%20others%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20content%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1773812%22%20slang%3D%22en-US%22%3ERe%3A%20Person-Hover-card%20Issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1773812%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F373269%22%20target%3D%22_blank%22%3E%40ganeshsanap%3C%2FA%3E%26nbsp%3B%3CBR%20%2F%3EI%20hope%20not%20-%20copied%20directly%20from%20github!%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%22children%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22img%22%2C%0A%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22width%22%3A%20%2232px%22%2C%0A%20%20%20%20%20%20%20%20%22height%22%3A%20%2232px%22%2C%0A%20%20%20%20%20%20%20%20%22overflow%22%3A%20%22hidden%22%2C%0A%20%20%20%20%20%20%20%20%22border-radius%22%3A%20%2250%25%22%2C%0A%20%20%20%20%20%20%20%20%22margin%22%3A%20%222px%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22src%22%3A%20%22%3D'%2F_layouts%2F15%2Fuserphoto.aspx%3Fsize%3DS%26amp%3Baccountname%3D'%20%2B%20%5B%24Editor.email%5D%22%2C%0A%20%20%20%20%20%20%20%20%22title%22%3A%20%22%5B%24Editor.title%5D%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22span%22%2C%0A%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22vertical-align%22%3A%20%22middle%22%2C%0A%20%20%20%20%20%20%20%20%22margin-left%22%3A%20%222px%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22txtContent%22%3A%20%22%5B%24Editor.title%5D%22%0A%20%20%20%20%7D%0A%20%20%5D%2C%0A%20%20%22defaultHoverField%22%3A%20%22%5B%24Editor%5D%22%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

I've got two lists (on different sites).

 

One works beautifully using the Person-Hover-Card JSON:

yes.png

One doesn't work at all:

no.png

 

Any ideas what's fouling it up? I'm assuming some sort of global setting somewhere?

Thanks!

7 Replies

@Chauc3r , Can you please add the JSON you are using to your question?

It will be easier for us to see if there is any error in your JSON code and answer your question.


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.

 

@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

best response confirmed by Chauc3r (Occasional Contributor)
Solution

@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.

 

@ganeshsanap That's worked perfectly, thank you.

 

Author, not Editor? That seems to be the only change?

@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 Like my replies if it helped to solve your issue :stareyes:

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

@Chauc3r, You can use the same JSON code, just replace the $Author or $Editor by the internal name of your person or group column, like: [$internal name]

You can fin the internal name of your column using below link:

Find the internal name of SharePoint column 


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.