Show persona card on hover is not available for custom search results layouts

[jamesdellowE2]

Version used 4.2.2.0

Describe the bug The option to show persona card on hover is not available for custom search results layouts.

To Reproduce Create a custom search results layout using the mgt-people component in the Microsoft Graph Toolkit. You can see the hover working by switching to the People layout and activating this option, then return to the custom layout, but the setting is not saved.

Expected behavior The option to show persona card on hover should be available for custom layouts.

Screenshots N/a

Desktop (please complete the following information): Edge

Additional context N/a

[wobba]

@jamesdellowE2 can you provide repro with:

• provider and other setup in the webpart
• sample template

[FranckyC]

Hi @jamesdellowE2, settings in property pane from default layouts are not shared with the custom layout, this is by design. It means behavior for custom layouts can't be controlled using the property pane. Is this a requirement to switch this option on and off for users?

[jamesdellowE2]

Understood - that makes sense, and I don't think we would like the option shared, but we do need to be able switch on this feature in the custom layout. Could the switch be duplicated as an option in the custom layout dialog or another method provided within the custom layout code to turn on show persona card on hover?

[jamesdellowE2]

(Sorry, accidentally closed!)

Here are some more details:

We based on this sample to show ME: `

</mgt-person>`

I've attached the template and export of the web part: templateandwebpart.zip

[rdormanHW]

I have this issue too. My organisation's requirement was the ability to build a staff directory with custom attributes appearing in the hover persona cards. I started with the people display template, and then customised it to add the attributes, but the second you customise it, hover cards are not available, even if your configuration settings include the line

"showPersonaCard": true

The only workaround I have found is adding a second Search Results webpart to the page that contains 0 results (so it is hidden) but has its display set to people with hover cards. This seems to trigger a setting for the whole page that allows the hover cards to appear in the Search Results web part with the custom template. It would be nice if there was a flag we could put in the settings of the first Search Results web part (with the custom layout) to trigger hover cards without needing the second one.

[bryllyg]

Running into the same issue. Thanks @rdormanHW for the workaround.

[thomaswidmer]

I just implemented a custom layout using the persona card. We get results from Local SharePoint source and display the persona card using this part inside the below custom code.

The only thing you need to do is:

• activate Microsoft Graph Toolkit in page 2 of the Webpart settings
• approve the API requests you are getting in SharePoint Admin (must be done by a Global Admin)

That code snippet inside the entire layout works fine. The only missing thing is translations in to local language.

<mgt-person user-id="{{trim (itemAt (split (lowercase USERPROPERTY) '|') 0)}}" person-card="hover">
                        <template>
                            <pnp-persona 
                                data-image-url="/_layouts/15/userphoto.aspx?size=S&amp;accountname={{#with (split USERPROPERTY '|')}}{{[0]}}{{/with}}" 
                                data-fields-configuration="{{JSONstringify @root.properties.layoutProperties.peopleFields}}" 
                                data-item="{{JSONstringify item}}" 
                                data-persona-size="{{@root.properties.layoutProperties.personaSize}}"
                                data-theme-variant="{{JSONstringify @root.theme}}"
                                data-instance-id="{{@root.instanceId}}"
                                data-context="{{JSONstringify @root}}">
                            </pnp-persona>
                        </template>
                        <template data-type="person-card">
                            <mgt-person-card inherit-details>
                            </mgt-person-card>
                        </template>
</mgt-person>