Merge pull request #3597 from microsoft-search/develop

v4.11

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,6 +7,8 @@ assignees: ''
 
 ---
 
+
+
 ### Check existing issues before logging new ones
 If you are not using the latest version, triage your issue with the latest version before logging as we won't provide patches to older versions.
 
@@ -16,6 +18,11 @@ If you are not using the latest version, triage your issue with the latest versi
 
 __Remove the above section before submitting, and removal of the below template will result in the issue being closed.__
 
+### Follow the template below or we will have to delete this request!!
+We can assist a lot faster if you provide the following information:
+
+
+
 **Version used**
 Ex: 4.8
 

docs/Q&A.md

@@ -0,0 +1,45 @@
+
+
+**Q: In version 4.10.1 the LPC (Live Person Card) hover option became available as an option for the People Layout. What is the difference between LCP and Persona card? **
+
+![LCP option](/assets/LCP.png "LCP option in the People Layout")
+
+
+
+
+
+**A**: The Live Person Card does not require any additional Graph Permissions. The LPC can be customized to show additional fields from Entra ID, but not the same way as the pnp-people or mgt-person. However it will always show equal to any other people card shown in Microsoft 365.See https://learn.microsoft.com/en-us/graph/add-properties-profilecard.  
+
+ ----------------------
+
+**Q: Is the deprecation of SharePoint-Add-in's affecting PnP Modern Search?**
+
+**A**: No, as the project is built using the SharePoint Framework, not the deprecated add-in model.
+
+-----------------------
+
+**Q: Is the PnP Modern Search package certified by a 3rd party in order to ensure compliance with GDPR or similar requirements? **
+
+**A**: No, it is up to you to review the source code in order to ensure compliance with any relevant requirements. The web parts do not store, process or log any data, thus GDPR is not directly relevant. Any privacy concern of data is up to how data is stored and protected at the source level, e.g. SharePoint. 
+
+ -----------------------
+
+**Q: Are the PnP Modern Search web parts logging data to a local or remote receiver? **
+
+**A**: No, the PnP Modern Search web parts are not logging data to any receiver, not even telemetry data. 
+
+ -----------------------
+
+**Q: What is the ID or Name of the PnP Modern Search App Registration in Azure AD/Entra? **
+
+**A**: There isn’t an App Registration nor Enterprise application as PnP Modern Search does not rely on an application entry. The solution uses FedAuth cookies from SharePoint when calling the SharePoint Search API, and uses the “SharePoint Online Client Extensibility” app registrations when calling Graph API’s. 
+
+The solution does elevate any permissions when calling the API’s as permissions are all of the type Delegated Permissions, meaning that the permissions are bound to the current user, not the PnP Modern Search solution. 
+
+ -----------------------
+
+**Q: I am concerned about what will happen if the project is abandoned. Will Microsoft take over the project?  **
+
+**A**: It is hard to predict the future, but a vast number of companies are using the PnP Modern Search web parts in their solutions. The solution is hosted on GitHub owned by the Microsoft Search team. Most likely these companies will either clone the project and make a commercial version or will provide the manpower needed to keep the project in maintenance mode. 
+
+-----------------------

docs/extensibility/index.md

@@ -29,7 +29,7 @@ For your project to be a valid extensibility library, you must have the followin
 - You library **manifest ID** must be registered in the Web Part where you want to use the extension.
 
 !!! important "SPFx version"
-    The SPFx library project must use the same SPFx version as the main solution (currently `1.15.2`). Owherwise you may face issues at build time. See [GitHub issue #1893](https://github.com/microsoft-search/pnp-modern-search/issues/1893)
+    The SPFx library project must use the same SPFx version as the main solution (check source code for current version). Owherwise you may face issues at build time. See [GitHub issue #1893](https://github.com/microsoft-search/pnp-modern-search/issues/1893)
 
 ### Supported extensions
 

docs/extensibility/templating.md

@@ -64,7 +64,7 @@ The following custom helpers are available in addition to the [handlebars-helper
 | `{{getUrlParameter <parameter> <url>}}` | Return the query parameter value from a URL. Omitting the optional url parameter uses the current browser URL. | `{{getUrlParameter "k"}}` return the value of the `k` query parameter from the browser URL.<br><br>`{{getUrlParameter "k" "https://foo?k=test"}}` return the value of the `k` query parameter from the provided URL.
 
 
-> Need any other helper? Let us know [here](https://github.com/aequos-solutions/modern-search-results/issues)!
+> Need any other helper? Let us know [here](https://github.com/microsoft-search/pnp-modern-search/issues)!
 
 ### Using builtin web components
 

docs/extensibility/web_components_list.md

@@ -2,15 +2,16 @@
 
 Here are the list of all **reusable** web components you can use to customize your templates. 
 
-- [<pnp-iconfile>](#ltpnp-iconfilegt)
-- [<pnp-documentcard>](#ltpnp-documentcardgt)
-- [<pnp-filepreview>](#ltpnp-filepreviewgt)
-- [<pnp-icon>](#ltpnp-icongt)
-- [<pnp-panel>](#ltpnp-panelgt)
-- [<pnp-collapsible>](#ltpnp-collapsiblegt)
-- [<pnp-persona>](#ltpnp-personagt)
-- [<pnp-img>](#ltpnp-imggt)
-- [<pnp-breadcrumb>](#ltpnp-breadcrumbgt)
+- [Builtin web components](#builtin-web-components)
+  - [`<pnp-iconfile>`](#pnp-iconfile)
+  - [`<pnp-documentcard>`](#pnp-documentcard)
+  - [`<pnp-filepreview>`](#pnp-filepreview)
+  - [`<pnp-icon>`](#pnp-icon)
+  - [`<pnp-panel>`](#pnp-panel)
+  - [`<pnp-collapsible>`](#pnp-collapsible)
+  - [`<pnp-persona>`](#pnp-persona)
+  - [`<pnp-img>`](#pnp-img)
+  - [`<pnp-breadcrumb>`](#pnp-breadcrumb)
 
 > All other web components you will see in builtin layout templates are considered **internal** and are not supported for custom use.
 
@@ -191,7 +192,9 @@ Here are the list of all **reusable** web components you can use to customize yo
     data-tertiary-text=""
     data-optional-text="514 928 0000"
     data-persona-size=""
-    data-native-lpc=true >
+    data-native-lpc=true
+    data-show-presence=true
+    data-user-object-id="[GUID]">
 </pnp-persona>
 ```
 
@@ -204,6 +207,8 @@ Here are the list of all **reusable** web components you can use to customize yo
 |**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.
+|**data-show-presence**|Show the user's presence-information.
+|**data-user-object-id**|The person's Entra ID Object-ID (a GUID normally provided by the default-slot "PersonQuery" which is mapped to managed property "AADObjectID")
 
 ## `<pnp-img>` 
 - **Description**: Display an image with support for fallback behavior.

docs/index.md

@@ -86,9 +86,15 @@ Also, to help us to resolve your issue, you can include screenshots or error mes
 - Errors displayed in the SharePoint console (pressing CTRL+F12)
 
 ## Issues, questions, feedback?
-
 For any issue, question or feedback, please the [official GitHub repository](https://github.com/microsoft-search/pnp-modern-search/issues). We will be happy to help you!
 
+## Q&A
+We have a list of frequently asked questions available [here](q&a). If you have a question, it might be already answered there.
+
+
+
+
+
 
 ## About
 
@@ -110,3 +116,4 @@ Here is the list of main contributors of the PnP Modern Search (all versions inc
 - Paolo Pialorsi (PiaSys.com) - [@PaoloPia](https://twitter.com/paolopia)
 - Patrik Hellgren (SherparsGroupAB) - [@PatrikHellgren](https://twitter.com/patrikhellgren)
 - Erfan Darroudi [@edarroudi](https://github.com/edarroudi)
+- Kasper Larsen (Fellowmind) - [@kasperlarsen](https://twitter.com/kasperbolarsen)

docs/scenarios/Connect-to-a-search-results-webpart.md

@@ -0,0 +1,53 @@
+# Connect to a search results webpart
+
+!!! note
+The PnP Modern Search Web Parts must be deployed to your App Catalog and activated on your site. See the [installation documentation](../installation.md) for details.
+
+This scenario describes how to connect more then one results Web Part together. One results Web Part will view the sites, connected with the current HUB site, the other, connected results Web Part, will show the documents from the selected site.
+
+## SharePoitn HUB site structure
+As basic architecture we need a SharePoint HUB site and sites associated to the HUB site.
+
+![SharePoint admin center HUB architecture](assets/Connect-to-a-search-results-webpart/sharepoint-admin-center-hub-architecture.png)
+
+## Create a simple search page
+We need a SharePoint page configured with the PnP Modern Search Web Parts. See the scenario how you can [create a simple search page](create-simple-search-page.md)
+
+Add two PnP Results Web Part, we will configure this web parts later:
+![Simple search page with two result web parts](assets/Connect-to-a-search-results-webpart/simple-search-page-two-results.png)
+
+## Configure first results Web Part with current HUB site and associated sites
+In the first PnP Results Web Part add the query to show the current HUB site and the associated sites to the HUB. 
+
+![Configure first PnP Results Web Part](assets/Connect-to-a-search-results-webpart/configure-first-results-webpart.png)
+
+Query template:
+{searchTerms} contentclass=STS_Site AND DepartmentID:{{Site.id._guid}}
+
+Table with HUB properties with detail information: https://learn.microsoft.com/en-us/sharepoint/crawled-and-managed-properties-overview
+
+Activate the details list layout and activate the option "Allow items selection" in the results Web Part. 
+You can display only the title column, we don't need the other columns.
+
+![Configure first PnP Results Web Part layout options](assets/Connect-to-a-search-results-webpart/configure-first-results-webpart-layout.png)
+
+## Configure second results Web Part connected to the first
+The second PnP Search Results Web Part on the same page need the query that will show the documents from the selected site in the first results web part.
+
+![Configure second PnP Results Web Part](assets/Connect-to-a-search-results-webpart/configure-second-results-webpart.png)
+
+Query template:
+{searchTerms} DepartmentID:{{Site.id._guid}} AND IsDocument:1 
+
+Activate the details list layout. You can display only the title and created column, we don't need the other columns.
+
+You need to configure the chapter "Use data from this Web Part" under Available connections!
+
+![Configure second PnP Results Web Part available connections](assets/Connect-to-a-search-results-webpart/configure-second-results-webpart-connections.png)
+
+Save the page.
+
+## Solution and test your Web Part connections
+After the configuration you can select a site and the documents will be show up for the selected site.
+
+![Solution and test your Web Part connections](assets/Connect-to-a-search-results-webpart/solution-use-results-webpart-connections.png)

docs/scenarios/index.md

@@ -18,7 +18,6 @@ Most search solutions require some filters (aka refiners) to allow the user to f
 
 Search verticals can be used to selectively search specific content per vertical. Using the SharePoint provider you can use result sources to limit the content returned, or you can add the required KQL in the web part itself. This sample shows how to set up multiple search verticals on different pages.
 
-
 ## [Create a search page with verticals (within the same page)](Create-a-search-page-with-verticals-within-the-same-page.md)
 
 Search verticals can be used to selectively search specific content per vertical. Using the SharePoint provider you can use result sources to limit the content returned,
@@ -43,6 +42,5 @@ A common request in any intranet is to show birthdays of employees. This scenari
 ## [Setup Results web part to show work anniversaries](Setup-Results-web-part-to-show-work-anniversaries.md)
 Showing the work anniversaries of employees is a common request in any intranet. This scenario describes one way to achive this using a sleight of hand trick/cheating as the search index does not contains the information we need. 
 
----
-
-More to come!
+## [Connect one Search Results web part to another Search Results Web Part](Connect-to-a-search-results-webpart.md)
+This scenario describes how to connect more then one results Web Part together. One results Web Part will view the sites, connected with the current HUB site, the other, connected results Web Part, will show the documents from the selected site.

docs/usage/search-results/layouts/details-list.md

@@ -6,4 +6,6 @@ The 'details list' layout allows you to display items as a structured list, the
 | ------- |---------------- | ---------- |
 | **Manage columns** | Allows you to build you own table view by adding or removing columns dynamically. For each column, you get the following options:<br><p align="center">[!["Manage columns"](../../../assets/webparts/search-results/layouts/details_list_fields.png)](../../../assets/webparts/search-results/layouts/details_list_fields.png)</p><ul><li>**Sort order**: the order of the column in the table.</li><li>**Column name**: the column friendly name to display.</li><li>**Column value**: you can choose here either a field from the data source current results set (from the list or as free text) without any transformation or use an Handlebars expression by clicking on the checkbox next to it. In this case, all Handlebars helpers from the main template are available and you can also add you own HTML markup in the column value. For HTML fields you can use the special variable `@root.theme` to use theme colors (ex: `@root.theme.palette.themePrimary`).<br>You can specify a different field for sorting when using an Handlebars expression by specifying the field from the separate dropdown.<br>![Handlebars Expression](../../../assets/webparts/search-results/layouts/details_list_hb_expr.png)<br><br>![Handlebars Expression 2](../../../assets/webparts/search-results/layouts/details_list_hb_expr2.png)</li><li>**Minimum width in px**: the minimum width of the column in pixels.</li><li>**Maximum width in px**: the maximum width of the column in pixels.</li><li>**Sortable**: allows you to sort column values according to the **data source sort settings**. It means you must first configure the sort setting at data source level with option _'User sort'_ to `true` to see them in the details list columns configuration. Sort is perfromed one column at a time.</li><li>**Resizable**: allows you to resize the column dynamically in display mode.</li><li>**Multiline**: if the column column should be multiline. By default only ellipsis (...) will be display for larger text.</li></ul>
 | **Show file icon** | Hide or display the file icon in the first column.
-| **Compact mode** | Display the details list in compact mode.
+| **Compact mode** | Display the details list in compact mode.
+| **Enable grouping** | Display a grouped list, grouped by the specified column.
+| **Enable sticky header** | Display the details list with a sticky header that will stay in place when scrolling. Specify the desired height for the view (in pixels) and then specify the desired items per page in _Number of items per page_ under _Paging options_ and all items on the page will be scrollable within the view.

docs/usage/search-results/layouts/people.md

@@ -9,6 +9,7 @@ The 'people' layout display a list of persons with additional information. Typic
 | **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).
+| **Show presence** | <p>If enabled, the person's presence-information will be displayed in the bottom right corner of the user's profile picture.</p>This feature uses Microsoft Graph and needs the API permission 'Presence.Read.All' in your tenant to work.
 | **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.
 
 #### Persona hover card

search-parts/config/package-solution.json

@@ -3,7 +3,7 @@
     "solution": {
         "name": "PnP Modern Search - Search Web Parts - v4",
         "id": "59903278-dd5d-4e9e-bef6-562aae716b8b",
-        "version": "4.10.2.0",
+        "version": "4.11.0.0",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": true,
         "isDomainIsolated": false,

search-parts/config/serve.json

@@ -1,10 +1,6 @@
 {
-    "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
     "port": 4321,
     "https": true,
-    "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx",
-    "api": {
-        "port": 5432,
-        "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-    }
+    "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
 }