Merge pull request #4099 from microsoft-search/release/v4.14

Release/v4.14

docs/QnA.md

@@ -1,24 +1,25 @@
 
 
 
-**Q: Should I switch from using SharePoint Search as the datasource to Microsoft Search? **
+**Q**: Should I switch from using SharePoint Search as the datasource to Microsoft Search?
 ![Microsoft Search](./assets/DataSources.png "Datasources")
 
-**A**: It depends on your requirement. Microsoft Search is the API being invested in going forward and allows search on entities outside of SharePoint such as Teams, Outlook and Graph Connector items. If you are only using SharePoint and OneDrive data, using features such as managed metadata, or creating a people directory, then using the SharePoint Search API is recommended for now.
-
+**A**: It depends on your requirements. Microsoft Search is the API being invested in going forward and allows search on entities outside of SharePoint such as Teams, Outlook and Graph Connector items. If you are only using SharePoint and OneDrive data, using features such as managed metadata, or creating a people directory, then using the SharePoint Search API is recommended for now.
 
+-----------------------
 
-**Q: How will the automatic disabling of SharePoint Online custom scripts affect the PnP Modern Search web parts? **
+**Q**: How will the automatic disabling of SharePoint Online custom scripts affect the PnP Modern Search web parts?
 
 **A**: Not at all. The PnP Modern Search web parts are built using the SharePoint Framework, which is not affected by the automatic disabling of custom scripts.
 
+-----------------------
 
-
-**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? **
+**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.  
 
  ----------------------

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

@@ -5,7 +5,7 @@ The PnP Modern Search Web Parts must be deployed to your App Catalog and activat
 
 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
+## SharePoint 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)

docs/scenarios/assets/search-verticals-with-parameter/readme.md

@@ -0,0 +1 @@
+

docs/scenarios/search-verticals-with-parameter.md

@@ -0,0 +1,29 @@
+# Search verticals with query string parameter
+
+!!! 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 you can use query string parameters in search verticals and how you can directly open a vertical with the query string parameter from a url.
+
+## Create a new SharePoint page
+Create a new search page and connect the results webpart with the verticals webpart.
+
+![Create a page](assets/search-verticals-with-parameter/configure-search-results.png)
+
+## Configure search verticals
+Configure the search verticals of your choice with not too long and a useful, clear, "Tab value". I like the icons for an better visual experience for the users.
+
+![Configure search verticals](assets/search-verticals-with-parameter/configure-search-verticals.png)
+
+### Configure query string paramter
+By default you have a "v" as search query parameter. I like a specific, more meaningful, parameter like "tab".  
+
+![Configure search verticals query parameter](assets/search-verticals-with-parameter/configure-search-verticals-query-parameter.png)
+
+## Open verticals with query parameters
+After the configuration you can add the query string parameter to the url and open the specific search vertical direct from a link in page content or from the SharePoint navigation.
+
+Sample URL with query string parameter
+https://<TENANT>.sharepoint.com/sites/<SITE>/SitePages/>SEARCH-PAGE>.aspx?Tab=Sites
+
+![Sample search verticals query parameter](assets/search-verticals-with-parameter/example-query-string-parameter.png)

docs/v3/search-parts/templating.md

@@ -26,7 +26,7 @@ Displays the search results inside a tabular view using the associated Office UI
 
 | Option | Description
 | ------ | ---------------
-| **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>![Details list columns](../images/details_list_manage_columns.png)<ul><li>**Column name**: the column name to display.</li><li>**Minimum width in px**: the minimum width of the column.</li><li>**Maximum width in px**: the maximum width of the column.</li><li>**Sortable**: allows you to sort column values alphabetically when the column header is clicked (ascending or descending).</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><li>**Link to item**: if enabled, wrap the column value with an URL link pointing to the search result item (i.e. Path). This option is especially suitable for the 'Title' column.</li><li>**Column value**: you can choose here either a managed property value (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 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 `@themeVariant` to use theme colors (ex: `@themeVariant.palette.themePrimary`)<br>![Handlebars Expression](../images/details_list_hb_expr.png)<br><br>![Handlebars Expression 2](../images/details_list_hb_expr2.png)</ul>
+| **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>![Details list columns](../images/details_list_manage_columns.png)<ul><li>**Column name**: the column name to display.</li><li>**Minimum width in px**: the minimum width of the column.</li><li>**Maximum width in px**: the maximum width of the column.</li><li>**Sortable**: allows you to sort column values alphabetically when the column header is clicked (ascending or descending).</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><li>**Link to item**: if enabled, wrap the column value with an URL link pointing to the search result item (i.e. Path). This option is especially suitable for the 'Title' column.</li><li>**Column value**: you can choose here either a managed property value (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 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 `@theme` to use theme colors (ex: `@theme.palette.themePrimary`)<br>![Handlebars Expression](../images/details_list_hb_expr.png)<br><br>![Handlebars Expression 2](../images/details_list_hb_expr2.png)</ul>
 | **Show file icon** | Hide or display the file icon in the first column.
 | **Compact mode** | Display the details list in compact mode. 
 
@@ -54,7 +54,7 @@ Displays search results as cards view using the associated Office UI Fabric [Doc
 
 In order to use the property `IconSrc`, ensure you do not specify a property for `File Extension` to not override the custom IconSrc. A custom icon should be a 16x16 pixel image.
 
-For HTML fields you can use the special variable `@themeVariant` to use theme colors (ex: `@themeVariant.palette.themePrimary`). If you don't set a value for those fields (i.e an empty value), they won't appear in the UI:<br>![HTML Fields](../images/documentcards_html_fields.png)</p>
+For HTML fields you can use the special variable `@theme` to use theme colors (ex: `@theme.palette.themePrimary`). If you don't set a value for those fields (i.e an empty value), they won't appear in the UI:<br>![HTML Fields](../images/documentcards_html_fields.png)</p>
 | **Enable result preview** | If enabled, displays a preview callout when the document card image is clicked.
 | **Show file icon** | Hide or display the file icon in the card.
 | **Compact mode** | Display the cards in compact mode. 
@@ -401,17 +401,17 @@ Notice your template content must be enclosed in a `<content id="template">` tag
 
 ### Work with SharePoint theme
 
-A `themeVariant` variable is available in the root Handlebars context. It contains all current theme information that can use in your CSS classes or inline styles. Example:
+A `theme` variable is available in the root Handlebars context. It contains all current theme information that can use in your CSS classes or inline styles. Example:
 
 ```
 <style>
     .example-themePrimary a {
-        color: {{@root.themeVariant.palette.themePrimary}};
+        color: {{@root.theme.palette.themePrimary}};
     }
 </style>
 ``` 
 
-To see all available values, you can inspect the `themeVariant` objetc using the 'Debug View' layout. Notice the values are udpated dynamically every time you udpate the theme through the UI.
+To see all available values, you can inspect the `theme` objetc using the 'Debug View' layout. Notice the values are udpated dynamically every time you udpate the theme through the UI.
 
 ### Custom code renderers
 

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.13.1.0",
+        "version": "4.14.0.0",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": true,
         "isDomainIsolated": false,