Person-Card component no longer works within layouts > People > Manage people fields

[Justin-Nash]

Version used
4.12.2

Describe the bug
In older versions of PnP Modern Search we were able to use Microsoft Graph Person-Card component to render a manager display name based on the managers email address returned in search after configuring a managed property Manager.

This was working well allowing users to see both the user information on the person they where looking for and that persons manager without having to click through pop ups.

The issue now is that the Microsoft Graph Person-Card component no longer works within the "Manage people fields" section. The last known working version was 4.9. We haven't tested ever version between 4.9 and 4.12.2 but I know the issue exists in:

• 4.12.2
• 4.12.1
• 4.11.1

To Reproduce
Detailed steps to reproduce the behavior:

1. Add a new PnP - Search Results web part to a page
2. Select SharePoint Search
3. Set Result Source Id/ Scope|Name to LocalPeopleResults
4. Select Next so you are on page 2
5. Select People under Handlebars/HTML
6. Select Managed card fields
7. Select the edit icon for *Primary text
8. Replace {{slot item @root.slots.UserDisplayName}} with <mgt-person user-id="{{getUserEmail (slot item @root.slots.UserEmail)}}" view="oneline"></mgt-person>
9. Save, Save and Publish

Expected behavior
We expect to see the Users Name in the first field. As demonstrated in the screenshots.

Screenshots
Expected outcome:

Actual outcome:

Desktop (please complete the following information):

• Browser Chrome, Edge, Firefox

Additional context
The above steps are a simplified version of what we do with a Manager field. For our environment using a users email or UPN is not a valid option as they do not include the users name in full or in any consistent order.

[kasperbolarsen]

HI, you are right, that doesn't seem to work

Perhaps a custom template like this can resolve the issue:

In order for it to work you will have to set a slot to "Manager" and in my case the manager managed property was mapped to a RefinableString , but I guess you can use the auto generated one as well. Remember to add it to "selected properties" as well

<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 data-type="person-card">
                                            <mgt-person-card inherit-details>
                                            </mgt-person-card>
                                        </template>
                                    </mgt-person>
                                {{else}}
                                      
                                <div>
                                    
                                    <mgt-person person-query="{{getUserEmail (slot item @root.slots.UserEmail)}}" view="threelines"></mgt-person>
                                      <div>Manager</div>
                                      <ul role="menu">
                                        <li role="menuitem" data-is-focusable="true" class="ui-list__item" tabindex="0">
                                          <mgt-person person-query="{{#with (split (slot item @root.slots.Manager) '|')}}{{[2]}}{{/with}}" view="twolines" line2-property="jobTitle"></mgt-person>
                                        </li>
                                        
                                      </ul>
                                  </div>
                                  

                                {{/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}}
        <div class="template--resultCount">
            <span class="placeholder--shimmer placeholder--line" style="width: 20%"></span>
        </div>
    {{/if}}

    <div>
        <ul class="template--defaultList">
            {{#times @root.properties.paging.itemsCountPerPage}}   
                <pnp-personashimmers 
                    data-persona-size="{{@root.properties.layoutProperties.personaSize}}"
                    data-theme-variant="{{JSONstringify @root.theme}}"
                >
                </pnp-personashimmers>
            {{/times}}
        </ul>
    </div>
</div>