-
Notifications
You must be signed in to change notification settings - Fork 348
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'release/4.5.4' into main
- Loading branch information
Showing
67 changed files
with
1,230 additions
and
516 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
docs/scenarios/Create-a-search-page-with-verticals-within-the-same-page.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
# Scenario 8 - Create a search page with verticals (within the same page) | ||
|
||
!!! 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 configure multiple Search Verticals on the same page. | ||
|
||
## Create a new sharepoint page | ||
|
||
To add the Search Web Parts, you must first create a new modern SharePoint page. We will be configure this new page as a search page with the PnP Modern Search Web Parts. | ||
|
||
 | ||
|
||
## Add PnP Search Web Parts | ||
|
||
On the newly created page, add the PnP Modern Search Web Part Search Box, Search Verticals, and Search Results, twice. | ||
|
||
 | ||
|
||
The Web Parts can be arranged and configured on the page as desired. | ||
|
||
 | ||
|
||
## Configure Search Box | ||
|
||
You can leave the default configuration. | ||
|
||
 | ||
|
||
## Configure Search Vertical | ||
|
||
In the Search Verticals Web Part, the verticals (tabs) must be configured. | ||
|
||
 | ||
|
||
Insert the tab name and a fluent icon for e better visualization. The results are on the same page, so a link URL are not necessary. | ||
|
||
 | ||
|
||
## Configure first Search Result Web Part | ||
|
||
The first Results Web Part displays all results. Select the data source SharePoint and the result source "LocalSharePointResults". | ||
|
||
 | ||
|
||
In the "available connections" section, the connection to the Search Box and the Search Vertical must be configured. The results web part should only be displayed if the vertical "Everything" is active. | ||
|
||
 | ||
|
||
## Configure second Search Result Web Part | ||
|
||
The second results web part displays results from the predefined result source knowledge, configures the result source in the SharePoint admin center, and the GUID must be added to the Web Part. | ||
|
||
 | ||
|
||
In the "available connections" section, the connection to the Search Box and the Search Vertical must be configured again. The Results Web Part should only be displayed if the vertical "Knowledge" is selected. | ||
|
||
 | ||
|
||
After that, the minimum configuration is complete and the search page must be saved and published. The configuration can be customized, and a different layout can be used for the search results per Results WebPart. | ||
|
||
## Testing your configuration | ||
|
||
Now the query from the Search Box is sent to the verticals, depending on the choice of the verticals, the results are then displayed in the search result. | ||
|
||
 |
Binary file added
BIN
+12.7 KB
.../Create-a-search-page-with-verticals-within-the-same-page/Add-PnP-Web-Parts.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+7.84 KB
...arch-page-with-verticals-within-the-same-page/Configure-Search-Box-Web-Part.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+71.4 KB
...page-with-verticals-within-the-same-page/Configure-Search-Vertical-Web-Part.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+5.69 KB
...sets/Create-a-search-page-with-verticals-within-the-same-page/Create-a-page.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+38.5 KB
...th-verticals-within-the-same-page/First-Result-Web-Part-Vertical-Everything.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+36.6 KB
...h-page-with-verticals-within-the-same-page/First-Result-Web-Part-connection.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+17.6 KB
...ts/Create-a-search-page-with-verticals-within-the-same-page/Search-Vertical.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+32.4 KB
...s/Create-a-search-page-with-verticals-within-the-same-page/Search-Web-Parts.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+39.8 KB
...th-verticals-within-the-same-page/Second-Result-Web-Part-Vertical-Knowledge.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+47.2 KB
...-page-with-verticals-within-the-same-page/Second-Result-Web-Part-connection.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+27.5 KB
...ate-a-search-page-with-verticals-within-the-same-page/Test-Your-Search-page.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.