sp-dev-docs icon indicating copy to clipboard operation
sp-dev-docs copied to clipboard

Microsoft Lists: default person hovercards not working on additional person columns with JSON formatting applied

Open Fedes365 opened this issue 6 months ago • 2 comments

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

Declarative list formatting

Developer environment

None

What browser(s) / client(s) have you tested

  • [ ] 💥 Internet Explorer
  • [X] 💥 Microsoft Edge
  • [X] 💥 Google Chrome
  • [ ] 💥 FireFox
  • [ ] 💥 Safari
  • [ ] mobile (iOS/iPadOS)
  • [ ] mobile (Android)
  • [ ] not applicable
  • [ ] other (enter in the "Additional environment details" area below)

Additional environment details

  • Microsoft Edge Version 126.0.2592.102 (Official build) (64-bit)
  • Google Chrome Version 126.0.6478.127 (Official build) (64-bit)

Describe the bug / error

According to the official Docs, users should be able to "hover on a person column with formatting with default Profile card".

Default profile cards on hover used to work based on any person field, even if custom JSON formatting was applied to a column or to a view. Actually, applying any JSON formatting will make hover feature to not work anymore. Let's take two person columns as an example, respectively named "CUSTOM-PERSON" and "OOTB-PERSON". The former has a basic JSON formatting applied whereas the latter has no formatting at all:

immagine

A possible cause?

If we have a deeper look at what's happening with a browser DOM, there are some differences between the div containers of the columns displayed above. As illustrated below, the OOTB-PERSON column has an additional data actions property:

immagine

After applying that data action to the CUSTOM-PERSON related div by editing the HTML in browser DOM, the default person cards worked again on hover.

Additional details: default person cards on hover work correctly in SharePoint document libraries, since these make use of the "old" SharePoint list user interface.

Steps to reproduce

  1. Create a new list
  2. Add a custom person column (not Author or Editor) and apply this sample JSON code available in PnP List Formatting official repository.

Expected behavior

Default person cards on hover should work on any person column, according to the official docs and to all samples available in the PnP List Formatting gallery.

Fedes365 avatar Aug 06 '24 17:08 Fedes365