microsoft-search · wobba · Feb 5, 2024 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023
diff --git a/docs/assets/extensibility/web_components/breadcrumb_component.png b/docs/assets/extensibility/web_components/breadcrumb_component.png
diff --git a/...emplate/custom_search-results-example.png → ...emplate/custom_search-results-example.png b/...emplate/custom_search-results-example.png → ...emplate/custom_search-results-example.png
diff --git a/...sert_external-url-for-custom-template.png → ...sert_external-url-for-custom-template.png b/...sert_external-url-for-custom-template.png → ...sert_external-url-for-custom-template.png
diff --git a/...plate/myfirsttemplate_file-screenshot.png → ...plate/myfirsttemplate_file-screenshot.png b/...plate/myfirsttemplate_file-screenshot.png → ...plate/myfirsttemplate_file-screenshot.png
diff --git a/...arepoint/open_htmlfile-in-text-editor.png → ...arepoint/open_htmlfile-in-text-editor.png b/...arepoint/open_htmlfile-in-text-editor.png → ...arepoint/open_htmlfile-in-text-editor.png
diff --git a/...s-in-sharepoint/save_the-changed-file.png → ...s-in-sharepoint/save_the-changed-file.png b/...s-in-sharepoint/save_the-changed-file.png → ...s-in-sharepoint/save_the-changed-file.png
diff --git a/...nedrive/open-template-folder-onedrive.png → ...nedrive/open-template-folder-onedrive.png b/...nedrive/open-template-folder-onedrive.png → ...nedrive/open-template-folder-onedrive.png
diff --git a/...search-page-and-see-result-of-changes.png → ...search-page-and-see-result-of-changes.png b/...search-page-and-see-result-of-changes.png → ...search-page-and-see-result-of-changes.png
diff --git a/...drive/sync-or-addshortcut-to-onedrive.png → ...drive/sync-or-addshortcut-to-onedrive.png b/...drive/sync-or-addshortcut-to-onedrive.png → ...drive/sync-or-addshortcut-to-onedrive.png
diff --git a/...int/central-repository-multiple-sites.png → ...int/central-repository-multiple-sites.png b/...int/central-repository-multiple-sites.png → ...int/central-repository-multiple-sites.png
diff --git a/...int/custom-template-external-url-edit.png → ...int/custom-template-external-url-edit.png b/...int/custom-template-external-url-edit.png → ...int/custom-template-external-url-edit.png
diff --git a/...n-sharepoint/sharepoint-resources-lib.png → ...n-sharepoint/sharepoint-resources-lib.png b/...n-sharepoint/sharepoint-resources-lib.png → ...n-sharepoint/sharepoint-resources-lib.png
diff --git a/...rios/create-your-first-custom-template.md → ...outs/create-your-first-custom-template.md b/...rios/create-your-first-custom-template.md → ...outs/create-your-first-custom-template.md
diff --git a/...os/edit-custom-templates-in-sharepoint.md → ...ts/edit-custom-templates-in-sharepoint.md b/...os/edit-custom-templates-in-sharepoint.md → ...ts/edit-custom-templates-in-sharepoint.md
diff --git a/...it-templates-using-vscode-and-onedrive.md → ...it-templates-using-vscode-and-onedrive.md b/...it-templates-using-vscode-and-onedrive.md → ...it-templates-using-vscode-and-onedrive.md
diff --git a/...o-store-custom-templates-in-sharepoint.md → ...o-store-custom-templates-in-sharepoint.md b/...o-store-custom-templates-in-sharepoint.md → ...o-store-custom-templates-in-sharepoint.md
diff --git a/docs/create-custom-layouts/index.md b/docs/create-custom-layouts/index.md
@@ -0,0 +1,24 @@
+
+
+
+If you are looking for inspiration, you can find a selection of custom layouts in the 
+[Custom layouts repository](https://github.com/microsoft-search/pnp-modern-search-layouts/blob/main/README.md)
+
+If you have a custom layout you want to share, please submit a PR to the repository.
+
+
+## [Scenario Create your first custom template](create-your-first-custom-template.md)
+
+Create your first custom template
+
+## [Store custom templates in SharePoint](howto-store-custom-templates-in-sharepoint.md)
+
+Storing custom templates as files in a SharePoint site, is great when you want to use them across sites and want some control.
+
+## [Edit custom templates in SharePoint](edit-custom-templates-in-sharepoint.md)
+
+Storing custom templates as files in a SharePoint site, is great when you want to use them across sites and want some control.
+
+## [Edit custom templates locally in Visual Studio Code](edit-templates-using-vscode-and-onedrive.md)
+
+When you have your templates in SharePoint, it is easy to setup a way to edit locally on your computer and still get the result in SharePoint almost instantly.
diff --git a/docs/extensibility/index.md b/docs/extensibility/index.md
@@ -54,7 +54,7 @@ From here, you can add the manifest IDs of your libraries and decide to enable o
 
 [!["Extensibility manifests registration"](../assets/extensibility/extensibility_configuration_manifest.png){: .center}](../assets/extensibility/extensibility_configuration_manifest.png)
 
-> Multiple librairies can be registred for a single Web Part instance allowing you to split your extensions into multiple projects (in the end, they will be all concatenated). For instance, this could be convenient when extensions come from different IT providers.
+> Multiple librairies can be registered for a single Web Part instance allowing you to split your extensions into multiple projects (in the end, they will be all concatenated). For instance, this could be convenient when extensions come from different IT providers.
 
 ### Create an extensibility library
 
@@ -179,4 +179,4 @@ export class MyCustomLibraryComponent implements IExtensibilityLibrary {
 }
 ```
 
-In order to run the above sample code, you will need to import in your library the following npm packages: `@microsoft/sp-component-base`, `@microsoft/sp-core-library`, and `@microsoft/sp-webpart-base`.  
+In order to run the above sample code, you will need to import in your library the following npm packages: `@microsoft/sp-component-base`, `@microsoft/sp-core-library`, and `@microsoft/sp-webpart-base`.  
diff --git a/docs/extensibility/templating.md b/docs/extensibility/templating.md
@@ -237,7 +237,7 @@ If no placeholder is present in the template, a default one will be loaded.
 
 > The Microsoft Graph Toolkit is a collection of reusable, framework-agnostic web components and helpers for accessing and working with Microsoft Graph. The components are fully functional right of out of the box, with built in providers that authenticate with and fetch data from Microsoft Graph.
 
-In the solution, you can use Graph Tookit components whitout the need to re-authenticate against Microsoft Graph because the Web Parts already use the [SharePoint provider](https://docs.microsoft.com/en-us/graph/toolkit/providers/sharepoint).
+In the solution, you can use Graph Tookit components without the need to re-authenticate against Microsoft Graph because the Web Parts already use the [SharePoint provider](https://docs.microsoft.com/en-us/graph/toolkit/providers/sharepoint).
 
 Refer to the official documentation to see [all available components](https://docs.microsoft.com/en-us/graph/toolkit/components/login). For instance, we use the Microsoft Graph Toolkit for the [people layout](../usage/search-results/layouts/people.md) via `<mgt-person>`.
 

diff --git a/docs/extensibility/web_components_list.md b/docs/extensibility/web_components_list.md
@@ -10,6 +10,7 @@ Here are the list of all **reusable** web components you can use to customize yo
 - [&lt;pnp-collapsible&gt;](#ltpnp-collapsiblegt)
 - [&lt;pnp-persona&gt;](#ltpnp-personagt)
 - [&lt;pnp-img&gt;](#ltpnp-imggt)
+- [&lt;pnp-breadcrumb&gt;](#ltpnp-breadcrumbgt)
 
 > All other web components you will see in builtin layout templates are considered **internal** and are not supported for custom use.
 
@@ -216,4 +217,51 @@ Here are the list of all **reusable** web components you can use to customize yo
 | Parameter | Description |
 | --------- | ----------- |
 |**errorImage**|URL to the fallback image
-|**hideOnError**|Hide image on error
+|**hideOnError**|Hide image on error
+
+## `<pnp-breadcrumb>` 
+- **Description**: Render a breadcrumb path of a SharePoint entity (file, item, folder, document library etc.).
+
+!["Breadcrumb component"](../assets/extensibility/web_components/breadcrumb_component.png){: .center}
+
+- **Usage**:
+
+Get started with:
+```html
+<pnp-breadcrumb 
+    data-path="{{OriginalPath}}"
+    data-site-url="{{SPSiteURL}}"
+    data-web-url="{{SPWebUrl}}"
+    data-entity-title="{{Title}}"
+    data-entity-file-type="{{FileType}}"
+/>
+```
+Use all properties:
+```html
+<pnp-breadcrumb 
+    data-path="{{OriginalPath}}"
+    data-site-url="{{SPSiteURL}}"
+    data-web-url="{{SPWebUrl}}"
+    data-entity-title="{{Title}}"
+    data-entity-file-type="{{FileType}}"
+    data-include-site-name="false" 
+    data-include-entity-name="true"
+    data-breadcrumb-items-as-links="true"
+    data-max-displayed-items="3"
+    data-overflow-index="0"
+    data-font-size="12"
+/>
+```
+|Parameter|Description|
+|--|--|
+|data-path|Used for creating the breadcrumb path. Component is designed to receive `OriginalPath` or `Path` property. Property is required for rendering the breadcrumb path. `String`|
+|data-site-url|Used for creating the breadcrumb path. Component is designed to receive `SPSiteURL` property. Property is required for rendering the breadcrumb path. `String`|
+|data-web-url|Used for creating the breadcrumb path. Component is designed to receive `SPWebUrl` property. Property is required for rendering the breadcrumb path. `String`|
+|data-entity-title|Used for creating the breadcrumb path. Component is designed to receive `Title` property. Property is required for rendering the breadcrumb path. `String`|
+|data-entity-file-type|Used for creating the breadcrumb path. Component is designed to receive `FileType` property. Property is required for rendering the breadcrumb path. `String`|
+|data-include-site-name|If the site name should be included in the breadcrumb items. Optional, default value `true`. `Boolean`|
+|data-include-entity-name|If the entity name should be included in the breadcrumb items. If the value is set to `false`, not only is the entity name excluded from the breadcrumb path, but also the last item in the breadcrumb path is not highlighted in bold. Optional, default value `true`. `Boolean`|
+|data-breadcrumb-items-as-links|If the breadcrumb items should be clickable links to the path they represent. Optional, default value `true`. `Boolean`|
+|data-max-displayed-items|The maximum number of breadcrumb items to display before coalescing. If not specified, all breadcrumbs will be rendered. Optional, default value `3`. `Int`|
+|data-overflow-index| Index where overflow items will be collapsed. Optional, default value `0`. `Int`|
+|data-font-size|Font size of breadcrumb items. Optional, default value `12`. `Int`|
diff --git a/docs/scenarios/Setup-Results-web-part-to-show-birthdays.md b/docs/scenarios/Setup-Results-web-part-to-show-birthdays.md
@@ -1,19 +1,15 @@
 
-A common requirement for intranets is to show birthdays of employees. 
-And as the SharePoint User Profile Application has a property for birthdays, it is a natural choice to use search to show birthdays of employees.
+A common requirement for intranets is to show birthdays of employees and as the SharePoint User Profile Application has a property for birthdays, it is a natural choice to use search to show birthdays of employees. In addition, at the time of writing (2023), the Graph API does not have a property for birthdays, so we can't use the Graph API to get the information.
 
-(as of writing this (2023), the Graph API does not have a property for birthdays, so we can't use the Graph API to get the information)
 
+The tricky part is that in the User profile application the birthday value is store is a rather unusual datatype: "date no year"
 
-
-The tricky part is that in the User profile application the birthday value is store is a rather usual datatype "date no year"
-
-![Birthday in the User Provisioning Service](../assets/../scenarios/assets/Setup-Results-web-part-to-show-birthdays/BirthdayUPA.png)
+![Birthday in the User Provisioning Service](../scenarios/assets/Setup-Results-web-part-to-show-birthdays/BirthdayUPA.png)
 
 
 In my tenant the SPS-Birthday property was mapped to RefinableDate00 and the actual value in the property is 2000-[the date]:
 
-![Managed Property value](../assets/Setup-Results-web-part-to-show-birthdays/refinabledate00.png)
+![Managed Property value](../scenarios/assets/Setup-Results-web-part-to-show-birthdays/RefinableDate00.png)
 
 (use the magnificent [SP Editor tool](https://chrome.google.com/webstore/detail/sp-editor/ecblfcmjnbbgaojblcpmjoamegpbodhd) or [SP Search Query Tool](https://github.com/pnp/PnP-Tools/blob/master/Solutions/SharePoint.Search.QueryTool/README.md) to inspect the managed properties)
 

diff --git a/docs/scenarios/index.md b/docs/scenarios/index.md
@@ -18,21 +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.
 
-## [Scenario Create your first custom template](create-your-first-custom-template.md)
-
-Create your first custom template
-
-## [Store custom templates in SharePoint](howto-store-custom-templates-in-sharepoint.md)
-
-Storing custom templates as files in a SharePoint site, is great when you want to use them across sites and want some control.
-
-## [Edit custom templates in SharePoint](edit-custom-templates-in-sharepoint.md)
-
-Storing custom templates as files in a SharePoint site, is great when you want to use them across sites and want some control.
-
-## [Edit custom templates locally in Visual Studio Code](edit-templates-using-vscode-and-onedrive.md)
-
-When you have your templates in SharePoint, it is easy to setup a way to edit locally on your computer and still get the result in SharePoint almost instantly.
 
 ## [Create a search page with verticals (within the same page)](Create-a-search-page-with-verticals-within-the-same-page.md)
 
@@ -48,17 +33,14 @@ With the Modern Search Web Parts you can create a simple and useful Department W
 ## [Use query rules for promoted links](Use-query-rules-for-promoted-links.md)
 With the Modern Search Web Parts you can show promoted links for important results. They will be configured with query rules in the SharePoint Search Admin Center. Promoted results will show users more informations and direct links about specific, predefined, terms they searching for.
 
+## [Use query string from url for dynamic results](use-query-string-in-url.md)
 This scenario describes how to use query string as value in the URL from the current page. You can use URL query string parameters to build dynamic search pages.
 Use a library with metadata that you can use the query string parameter in the URL.
 
-
-
 ## [Setup Results web part to show birthdays](Setup-Results-web-part-to-show-birthdays.md)
 A common request in any intranet is to show birthdays of employees. This scenario describes how to use stock SharePoint search to show birthdays of employees in the search results. 
 
-
 ## [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. 
 
 ---

diff --git a/docs/usage/search-results/layouts/custom.md b/docs/usage/search-results/layouts/custom.md
@@ -1,6 +1,6 @@
 The 'Custom' layout is a minimal layout to start with if you want to create your own customized UI from scratch.
 
-You can also start from an existing layout by first selecting it, and then click `{}` next to the *Edit results tempalte* field. This will copy the selected template and allow you to make modifications as needed.
+You can also start from an existing layout by first selecting it, and then click `{}` next to the *Edit results template* field. This will copy the selected template and allow you to make modifications as needed.
 
 !["Custom layout"](../../../assets/webparts/search-results/layouts/custom_layout.png){: .center} 
 

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -6,6 +6,7 @@ nav:
     - Introduction: index.md
     - Installation: installation.md
     - Scenario tutorials: scenarios/index.md
+    - Create custom layouts: create-custom-layouts/index.md
     - How to contribute?: how-to-contribute.md 
     - Building documentation: build-the-doc.md
   - Search Results:
@@ -33,8 +34,7 @@ nav:
     - Custom event handlers for adaptive cards actions: extensibility/adaptivecards_customizations.md
     - Custom data sources: extensibility/custom_data_sources.md
     - Custom query modifier: extensibility/custom_query_modifications.md
-  - Version 3:
-    - Documentation: v3/index.md
+
 theme:
   name: 'material'
   features:

diff --git a/search-extensibility/package-lock.json b/search-extensibility/package-lock.json