Search Results Web Part¶
The 'Search Results' Web Part is the fundamental building block of whole global solution. Its purpose is basically to get data from a specifc source and render them in a specific native or custom layout based on Handlebars and web components.
This Web Part can be used alone or connected to other Web Parts to add dyanmic interactions (filters, search box or verticals). To use the Web Part on a SharePoint page:
1. Edit your SharePoint modern page.
2. Search for the 'PnP - Search Results' Web Part and add it to your page.
You may use "PnP - Search Rollup" instead if you don't need to connect web parts. This version support being lazy loaded in the SharePoint framework to optimize page loading.
Configuration¶
The search results Web Part configuration is divided into four parts each corresponding to a property pane page:
- Data source: From where to retrieve the data. Includes the slots configuration and tokens usage.
- Layouts: How to render them.
- Connections: How the Web Part will be connected to others in the page.
- Extensibility: How the Web Part will be connected to others in the page.
Styling¶
Results styling¶
The results styling section allows you to customize the visual appearance of the results container to match your branding and design requirements.
| Setting | Description | Default value |
|---|---|---|
| Results background color | The background color of the results container. | Transparent |
| Results border color | The border color of the results container. | Theme primary color |
| Results border thickness | The thickness of the results container borders (in pixels). | 1px |
| Reset styling to default | Reset all styling options to their default values. | N/A |
Web part title styling¶
The title styling section allows you to customize the visual appearance of the web part title.
| Setting | Description | Default value |
|---|---|---|
| Title font | The font family to use for the web part title. | Segoe UI |
| Title font size | Controls the font size (in pixels) for the web part title. | 16px |
| Title font color | The color of the web part title text. | Theme primary color |
| Reset title styling to default | Reset all title styling options to their default values. | N/A |
Common Settings¶
These settings are available across all PnP Modern Search web parts:
- Audience Targeting: Control web part visibility based on user group membership.
- Paging: Configure pagination for data display.