Merge pull request #3408 from microsoft-search/enable-native-lpc

Add support for native SharePoint LPC
microsoft-search · Dec 14, 2023 · 8d095ea · 8d095ea
2 parents 6d385de + e7474b4
commit 8d095ea
Show file tree

Hide file tree

Showing 17 changed files with 57 additions and 3 deletions.
diff --git a/docs/extensibility/web_components_list.md b/docs/extensibility/web_components_list.md
@@ -189,7 +189,8 @@ Here are the list of all **reusable** web components you can use to customize yo
     data-secondary-text="Unknown"
     data-tertiary-text=""
     data-optional-text="514 928 0000"
-    data-persona-size="" >
+    data-persona-size=""
+    data-native-lpc=true >
 </pnp-persona>
 ```
 
@@ -201,6 +202,7 @@ Here are the list of all **reusable** web components you can use to customize yo
 |**data-tertiary-text**|The tertiary text to display (ex: work phone).
 |**data-optional-text**|The optional text to display.
 |**data-persona-size**|The size of the persona **item** to display (no only the picture). Valid values are <ul><li>tiny = 0</li><li>extraExtraSmall = 1</li><li>extraSmall = 2</li><li>small = 3</li><li>regular = 4</li><li>large = 5</li><li>extraLarge = 6</li></ul>
+|**data-native-lpc**|Enable SharePoint native Live Persona Card on hover.
 
 ## `<pnp-img>` 
 - **Description**: Display an image with support for fallback behavior.

diff --git a/docs/usage/search-results/layouts/people.md b/docs/usage/search-results/layouts/people.md
@@ -7,6 +7,7 @@ The 'people' layout display a list of persons with additional information. Typic
 | Setting | Description | Default value 
 | ------- |---------------- | ----------
 | **Manage people fields** | Allows you to define you own values for people placeholder fields. <br><p align="center">[!["Manage people fields"](../../../assets/webparts/search-results/layouts/manage_people_fields.png)](../../../assets/webparts/search-results/layouts/manage_people_fields.png)</p>As a field value, you can choose either a field property value (from the list or as free text) and without any transformation or use an Handlebars expression by clicking on the checkbox next to it. In this case, all helpers from the main template are available. Also, if the field doesn't have the **'Allow HTML'** indication flag enabled, it means the value will be always interpreted as text, regardless if you set an HTML value. Otherwise, your value will be interpreted as HTML for those fields (ex: '_Primary text_' placeholder field). For HTML fields you can use the special variable `@root.theme` to use theme colors (ex: `@root.theme.palette.themePrimary`) or `@root.slots.<SlotName>` to access slot value. If you don't set a value for those fields (i.e an empty value), they won't appear in the UI.</br>
+| **Show persona card on hover (LPC)** | If enabled, show a person card on hover for the curren item using the native SharePoint implementation.
 | **Show persona card on hover** | If enabled, show a person card on hover for the current item. <p align="center">[!["Persona card hover"](../../../assets/webparts/search-results/layouts/persona_card_hover.png)](../../../assets/webparts/search-results/layouts/persona_card_hover.png)</p> This feature uses Microsoft Graph and [Microsoft Graph Toolkit](https://docs.microsoft.com/en-us/graph/toolkit/components/person) to display information about the user and needs the following API permissions in your tenant to work: <ul><li>User.Read</li><li>People.Read</li><li>Contacts.Read</li><li>User.Read.All</li></ul>**If these permissions are not set, the card won't appear**. You can use [PnP Office 365 CLI](https://pnp.github.io/office365-cli/cmd/spo/serviceprincipal/serviceprincipal-grant-add/) to add correct permissions for this feature:</br></br>`$m365 spo serviceprincipal grant add --resource '<aad_app_display_name>' --scope 'user_impersonation'`. Refer to the section below about [persona hover card customization](#persona-hover-card).
 | **Component size** | The size of the person item (not only the picture). The more the size is and the more information will be displayed for each item and vice versa.
 

diff --git a/search-parts/src/components/PersonaComponent.tsx b/search-parts/src/components/PersonaComponent.tsx
@@ -11,6 +11,7 @@ import { isEmpty } from '@microsoft/sp-lodash-subset';
 import { DomPurifyHelper } from '../helpers/DomPurifyHelper';
 import { IComponentFieldsConfiguration } from '../models/common/IComponentFieldsConfiguration';
 import { ServiceScope, ServiceKey } from '@microsoft/sp-core-library';
+import { LivePersona } from "@pnp/spfx-controls-react/lib/LivePersona";
 
 export interface IPersonaComponentProps {
 
@@ -66,10 +67,20 @@ export interface IPersonaComponentProps {
      */
     templateService: ITemplateService;
 
+    /**
+     * Current servicescope
+     */
+    serviceScope: ServiceScope;
+
     /**
      * The Handlebars context to inject in slide content (ex: @root)
      */
     context?: string;
+
+    /**
+     * Enable native LPC from SharePoint
+     */
+    nativeLpc?: boolean;
 }
 
 export interface IPersonaComponentState {
@@ -134,6 +145,17 @@ export class PersonaComponent extends React.Component<IPersonaComponentProps, IP
             }
         };
 
+        if (this.props.nativeLpc) {
+            return <LivePersona upn={processedProps.tertiaryText}
+                template={
+                    <>
+                        <Persona {...persona} size={parseInt(this.props.personaSize)}></Persona>
+                    </>
+                }
+                serviceScope={this.props.serviceScope}
+            />
+        }
+
         return <Persona {...persona} size={parseInt(this.props.personaSize)}></Persona>;
     }
 }
@@ -159,7 +181,7 @@ export class PersonaWebComponent extends BaseWebComponent {
 
         const templateService = serviceScope.consume<ITemplateService>(templateServiceKey);
 
-        const personaItem = <PersonaComponent {...props} templateService={templateService} />;
+        const personaItem = <PersonaComponent {...props} templateService={templateService} serviceScope={serviceScope} />;
         ReactDOM.render(personaItem, this);
     }
 

diff --git a/search-parts/src/layouts/resultTypes/default_people.html b/search-parts/src/layouts/resultTypes/default_people.html
@@ -10,5 +10,6 @@
     data-optional-text="WorkPhone"
     data-persona-size="{{@root.properties.layoutProperties.personaSize}}"
     data-theme-variant="{{JSONstringify @root.theme}}"
+    data-native-lpc={{@root.properties.layoutProperties.showPersonaCardNative}}
 >
 </pnp-persona>
diff --git a/search-parts/src/layouts/results/people/PeopleLayout.ts b/search-parts/src/layouts/results/people/PeopleLayout.ts
@@ -23,6 +23,11 @@ export interface IPeopleLayoutProperties {
      * Flag indicating if the persona card should be displayed on hover
      */
     showPersonaCard: boolean;
+
+    /**
+     * Flag indicating if the persona card should be displayed on hover using native LPC
+     */
+    showPersonaCardNative: boolean;
 }
 
 export class PeopleLayout extends BaseLayout<IPeopleLayoutProperties> {
@@ -147,14 +152,23 @@ export class PeopleLayout extends BaseLayout<IPeopleLayoutProperties> {
                     this.onInit();
                 }
             }),
+            this._propertyFieldToogleWithCallout('layoutProperties.showPersonaCardNative', {
+                label: strings.Layouts.People.ShowPersonaCardOnHoverNative,
+                calloutTrigger: this._propertyFieldCalloutTriggers.Hover,
+                key: 'layoutProperties.showPersonaCardNative',
+                calloutContent: React.createElement('p', { style: { maxWidth: 250, wordBreak: 'break-word' } }, strings.Layouts.People.ShowPersonaCardOnHoverCalloutMsgNative),
+                onText: strings.General.OnTextLabel,
+                offText: strings.General.OffTextLabel,
+                checked: this.properties.showPersonaCardNative
+            }),
             this._propertyFieldToogleWithCallout('layoutProperties.showPersonaCard', {
                 label: strings.Layouts.People.ShowPersonaCardOnHover,
                 calloutTrigger: this._propertyFieldCalloutTriggers.Hover,
                 key: 'layoutProperties.showPersonaCard',
                 calloutContent: React.createElement('p', { style: { maxWidth: 250, wordBreak: 'break-word' } }, strings.Layouts.People.ShowPersonaCardOnHoverCalloutMsg),
                 onText: strings.General.OnTextLabel,
                 offText: strings.General.OffTextLabel,
-                checked: this.properties.showPersonaCard
+                checked: this.properties.showPersonaCard,
             }),
             PropertyPaneChoiceGroup('layoutProperties.personaSize', {
                 label: strings.Layouts.People.PersonaSizeOptionsLabel,

diff --git a/search-parts/src/layouts/results/people/people.html b/search-parts/src/layouts/results/people/people.html
@@ -75,6 +75,7 @@
                                             data-context="{{JSONstringify (truncateContext @root)}}"
                                             data-instance-id="{{@root.instanceId}}"
                                             data-theme-variant="{{JSONstringify @root.theme}}"
+                                            data-native-lpc={{@root.properties.layoutProperties.showPersonaCardNative}}
                                         ></pnp-persona>
                                     {{/and}}
 

diff --git a/search-parts/src/loc/commonStrings.d.ts b/search-parts/src/loc/commonStrings.d.ts
@@ -285,7 +285,9 @@ declare interface ICommonStrings {
         SupportHTMLColumnLabel: string;
         ResetFieldsBtnLabel: string;
         ShowPersonaCardOnHover: string;
+        ShowPersonaCardOnHoverNative: string;
         ShowPersonaCardOnHoverCalloutMsg: string;
+        ShowPersonaCardOnHoverCalloutMsgNative: string;
         Fields: {
           ImageUrl: string;
           PrimaryText: string;

diff --git a/search-parts/src/loc/da-dk.js b/search-parts/src/loc/da-dk.js
@@ -286,6 +286,7 @@ define([], function() {
                 SupportHTMLColumnLabel: "Tillad HTML",
                 ResetFieldsBtnLabel: "Nulstil felter til standardværdier",
                 ShowPersonaCardOnHover: "Vis persona-card ved at hover",
+                ShowPersonaCardOnHoverNative: "Vis persona-card ved at hover (LPC)",
                 ShowPersonaCardOnHoverCalloutMsg: "Denne feature bruger Microsoft Graph til at vise information om brugeren og skal bruge de følgende API-tilladelser i din tenant, for at det virker: ['User.Read','People.Read','Contacts.Read','User.Read.All'].",
                 Fields: {
                     ImageUrl: "Billede-URL",

diff --git a/search-parts/src/loc/en-us.js b/search-parts/src/loc/en-us.js
@@ -287,6 +287,8 @@ define([], function() {
                 ResetFieldsBtnLabel: "Reset fields to default values",
                 ShowPersonaCardOnHover: "Show persona card on hover",
                 ShowPersonaCardOnHoverCalloutMsg: "This feature uses Microsoft Graph to display information about the user and needs the following API permissions in your tenant to work: ['User.Read','People.Read','Contacts.Read','User.Read.All'].",
+                ShowPersonaCardOnHoverNative: "Show persona card on hover (LPC)",                
+                ShowPersonaCardOnHoverCalloutMsgNative: "This feature uses the native SharePoint implementation to show the live persona card (LPC). See https://pnp.github.io/sp-dev-fx-controls-react/controls/LivePersona/ for considerations.",
                 Fields: {
                     ImageUrl: "Image URL",
                     PrimaryText: "Primary text",

diff --git a/search-parts/src/loc/es-es.js b/search-parts/src/loc/es-es.js
@@ -286,6 +286,7 @@ define([], function() {
                 SupportHTMLColumnLabel: "Permitir HTML",
                 ResetFieldsBtnLabel: "Restablecer los valores por defecto de los campos",
                 ShowPersonaCardOnHover: "Mostrar tarjeta de persona al pasar el ratón por encima",
+                ShowPersonaCardOnHoverNative:"Mostrar tarjeta de persona al pasar el ratón por encima (LPC)",
                 ShowPersonaCardOnHoverCalloutMsg: "Esta función utiliza Microsoft Graph para mostrar información sobre el usuario y necesita los siguientes permisos de la API en su inquilino para funcionar: ['User.Read','People.Read','Contacts.Read','User.Read.All'].",
                 Fields: {
                     ImageUrl: "URL de la imagen",

diff --git a/search-parts/src/loc/fi-fi.js b/search-parts/src/loc/fi-fi.js
@@ -284,6 +284,7 @@ define([], function() {
                 SupportHTMLColumnLabel: "Salli HTML",
                 ResetFieldsBtnLabel: "Palauta kentät templaatin oletusarvoihin",
                 ShowPersonaCardOnHover: "Näytä henkilökortti hoverilla",
+                ShowPersonaCardOnHoverNative: "Näytä henkilökortti hoverilla (LPC)",
                 ShowPersonaCardOnHoverCalloutMsg: "Tämä ominaisuus käyttää Microsoft Graphia käyttäjäprofiilin tietojen näyttämiseen, ja tarvitsee seuraavat API oikeudet tenantissa toimiakseen: ['User.Read','People.Read','Contacts.Read','User.Read.All'].",
                 Fields: {
                     ImageUrl: "Kuvan URL",

diff --git a/search-parts/src/loc/fr-fr.js b/search-parts/src/loc/fr-fr.js
@@ -286,6 +286,7 @@ define([], function() {
                 SupportHTMLColumnLabel: "Autoriser HTML",
                 ResetFieldsBtnLabel: "Rétablir la valeur par défaut dans les champs",
                 ShowPersonaCardOnHover: "Afficher l’image de la carte en pointant le curseur",
+                ShowPersonaCardOnHoverNative: "Afficher l’image de la carte en pointant le curseur (LPC)",
                 ShowPersonaCardOnHoverCalloutMsg: "Cette fonction utilise Microsoft Graph pour afficher des renseignements sur l’utilisateur et nécessite les autorisations API suivantes pour que votre utilisateur puisse travailler : [« User.Read », « People.Read », « Contacts.Read », « User.Read.All »].",
                 Fields: {
                     ImageUrl: "URL de l’image",

diff --git a/search-parts/src/loc/nb-no.js b/search-parts/src/loc/nb-no.js
@@ -285,6 +285,7 @@ define([], function () {
           SupportHTMLColumnLabel: "Tillat HTML",
           ResetFieldsBtnLabel: "Bruk standardverdier",
           ShowPersonaCardOnHover: "Vis personkort når du fører musen over",
+          ShowPersonaCardOnHoverNative: "Vis personkort når du fører musen over (LPC)",
           ShowPersonaCardOnHoverCalloutMsg: "Denne funksjonen bruker Microsoft Graph for å vise informasjon om brukere og må ha følgende API-tilganger i din klient for at det skal virke: ['User.Read','People.Read','Contacts.Read','User.Read.All'].",
           Fields: {
             ImageUrl: "Bilde-URL",

diff --git a/search-parts/src/loc/nl-nl.js b/search-parts/src/loc/nl-nl.js
@@ -285,6 +285,7 @@ define([], function() {
                 SupportHTMLColumnLabel: "Sta HTML toe",
                 ResetFieldsBtnLabel: "Reset velden naar standaard waarden",
                 ShowPersonaCardOnHover: "Toon persona card bij 'hover'",
+                ShowPersonaCardOnHoverNative: "Toon persona card bij 'hover' (LPC)",
                 ShowPersonaCardOnHoverCalloutMsg: "Deze feature gebruikt Microsoft Graph om informatie over de gebruiker te tonen en heeft de volgende API rechten nodig in de tenant om te kunnen werken: ['User.Read','People.Read','Contacts.Read','User.Read.All'].",
                 Fields: {
                     ImageUrl: "Afbeeldings URL",

diff --git a/search-parts/src/loc/pl-pl.js b/search-parts/src/loc/pl-pl.js
@@ -286,6 +286,7 @@ define([], function() {
               SupportHTMLColumnLabel: "Zezwalaj na HTML",
               ResetFieldsBtnLabel: "Resetuj pola do wartości domyślnych",
               ShowPersonaCardOnHover: "Pokaż kartę po wskazaniu",
+              ShowPersonaCardOnHoverNative: "Pokaż kartę po wskazaniu (LPC)",
               ShowPersonaCardOnHoverCalloutMsg: "Ta funkcja używa Microsoft Graph aby wyświetlić informacje o użytkowniku i wymaga następujcych uprawnień API: ['User.Read','People.Read','Contacts.Read','User.ReadBasic.All'].",
               Fields: {
                   ImageUrl: "URL obrazu",

diff --git a/search-parts/src/loc/pt-br.js b/search-parts/src/loc/pt-br.js
@@ -284,6 +284,7 @@ define([], function() {
                 SupportHTMLColumnLabel: "Permitir HTML",
                 ResetFieldsBtnLabel: "Redefinir campos para os valores padrão",
                 ShowPersonaCardOnHover: "Mostrar cartão da <i>persona</i> ao passar o mouse",
+                ShowPersonaCardOnHoverNative: "Mostrar cartão da <i>persona</i> ao passar o mouse (LPC)",
                 ShowPersonaCardOnHoverCalloutMsg: "Esse recurso usa o Microsoft Graph para exibir informações sobre o usuário e precisa das seguintes permissões de API em seu locatário para funcionar: ['User.Read','People.Read','Contacts.Read','User.Read.All'].",
                 Fields: {
                     ImageUrl: "URL da imagem",

diff --git a/search-parts/src/loc/sv-SE.js b/search-parts/src/loc/sv-SE.js
@@ -286,6 +286,7 @@ define([], function () {
           SupportHTMLColumnLabel: "Tillåt HTML",
           ResetFieldsBtnLabel: "Återställ fält till standardvärden",
           ShowPersonaCardOnHover: "Visa personakort genom att föra musen över",
+          ShowPersonaCardOnHoverNative: "Visa personakort genom att föra musen över (LPC)",
           ShowPersonaCardOnHoverCalloutMsg: "Denna funktion använder Microsoft Graph för att visa information om användaren och måste använda följande API-behörigheter i din klient för att den ska fungera: ['User.Read','People.Read','Contacts.Read','User.Read.All'].",
           Fields: {
             ImageUrl: "Bild URL",