People results are empty when viewed from Viva Connections (desktop and mobile) and SharePoint mobile app; normal appearance in SharePoint in browser

[bynumhoekstra]

Apologies if this has already been posted - I think this is a new issue. The situation is that the pnp search results web part (configured with default settings) appears differently when viewed in the browser (works as expected) compared to the SharePoint mobile app and the Viva Connections app in Teams on desktop/mobile. When viewing on mobile and in the Teams app integrations, the results are showing up as blank person icons.

I've attached screenshots showing the default configurations and the browser vs. Teams app comparison. Thank you to anyone who can assist!

[bynumhoekstra]

Here's the default results template, just in case that makes a difference: `

<style>
    mgt-person {
        --initials-background-color: {{@root.theme.palette.themePrimary}};
    }

</style>

<div class="template">

    {{#if @root.properties.showSelectedFilters}}
        <pnp-selectedfilters 
            data-filters="{{JSONstringify filters.selectedFilters 2}}" 
            data-filters-configuration="{{JSONstringify filters.filtersConfiguration 2}}" 
            data-instance-id="{{filters.instanceId}}" 
            data-operator="{{filters.filterOperator}}"
            data-theme-variant="{{JSONstringify @root.theme}}"
        >
        </pnp-selectedfilters>
    {{/if}}

    <div class="template--header">
        {{#if @root.properties.showResultsCount}}
            <div class="template--resultCount">
                <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
            </div>
        {{/if}}

        <div class="template--sort">
            <pnp-sortfield 
                data-fields="{{JSONstringify @root.properties.dataSourceProperties.sortList}}" 
                data-default-selected-field="{{sort.selectedSortFieldName}}" 
                data-default-direction="{{sort.selectedSortDirection}}"
                data-theme-variant="{{JSONstringify @root.theme}}">
            </pnp-sortfield>    
        </div>
    </div>

    <div>
        <ul class="template--defaultList">
            {{#each data.items as |item|}}
                <pnp-select 
                    data-enabled="{{@root.properties.itemSelectionProps.allowItemSelection}}" 
                    data-index="{{@index}}" 
                    data-is-selected="{{isItemSelected @root.selectedKeys @index}}">

                    <template id="content">
                        <li class="template--peopleListItem" tabindex="0">
                            {{#> resultTypes item=item}}

                                {{#and @root.properties.layoutProperties.showPersonaCard (slot item @root.slots.PersonQuery)}}
                                    <mgt-person user-id="{{getUserEmail (slot item @root.slots.PersonQuery)}}" person-card="hover">
                                        <template>
                                            <pnp-persona 
                                                data-image-url="\{{personImage}}" 
                                                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>
                                {{else}}
                                    <pnp-persona 
                                        data-fields-configuration="{{JSONstringify @root.properties.layoutProperties.peopleFields}}"
                                        data-item="{{JSONstringify item}}" 
                                        data-persona-size="{{@root.properties.layoutProperties.personaSize}}" 
                                        data-context="{{JSONstringify @root}}"
                                        data-instance-id="{{@root.instanceId}}"
                                        data-theme-variant="{{JSONstringify @root.theme}}"
                                    ></pnp-persona>
                                {{/and}}

                            {{/resultTypes}}
                        </li>
                    </template>

                </pnp-select>
            {{/each}}
        </ul>
    </div>

    {{#if @root.properties.paging.showPaging}}

        {{#gt @root.data.totalItemsCount @root.properties.paging.itemsCountPerPage}}
            <pnp-pagination 
                data-total-items="{{@root.data.totalItemsCount}}" 
                data-hide-first-last-pages="{{@root.properties.paging.hideFirstLastPages}}"
                data-hide-disabled="{{@root.properties.paging.hideDisabled}}"
                data-hide-navigation="{{@root.properties.paging.hideNavigation}}"
                data-range="{{@root.properties.paging.pagingRange}}" 
                data-items-count-per-page="{{@root.properties.paging.itemsCountPerPage}}" 
                data-current-page-number="{{@root.paging.currentPageNumber}}"
                data-theme-variant="{{JSONstringify @root.theme}}"
            >
            </pnp-pagination>
        {{/gt}}

    {{/if}}

</div>

{{#if @root.properties.showResultsCount}}

{{/if}}

{{#times @root.properties.paging.itemsCountPerPage}} {{/times}}

`

[kasperbolarsen]

Hi, I have tested your scenario, setting up a * search on the localpropleresults source and using the People layout. This seems to work just fine, both in the browser( edge + chrome) and in the SharePoint App on Android. I tested both with and without the hover panel enabled. Can you share more details, like which kind of user you are logged in as, and on which mobile device you are seeing this issue?

[bynumhoekstra]

I have some more data points on this issue - I just tested this from my dev tenant and everything worked as expected. The issue was on a prod tenant. This could be really hard to track down the differences in these tenant configurations, and it ultimately doesn't appear to be something that is wrong with the pnp search web parts. I'll close the issue, but welcome any advice or ideas that people might have.

[bynumhoekstra]

One more test and I just realized what was going on. The behavior of this web part only happens when:

1. The "Show persona card on hover" toggle is selected
2. The SharePoint page is viewed in Viva Connections

[kasperbolarsen]

Nice debugging work!