mirror of
https://github.com/pnp/sp-dev-fx-webparts.git
synced 2025-02-08 05:58:36 +00:00
14f6753b62
* Added the react-search-refiners folder * Updated pagination + format date for DateTime filters * Added grouped list in the filter panel + fixed some bugs * Added custom scrollbar style * Added a placeholder when the Web Part is not configured * Cleaned code * Miscellaneous fixes before PR. * Added Web Part sample images * Updated images * Adde the link to the associated blog post. * Replaced toggle by checkbox + added query template parameter. * react-search-refiners: CSS fixes * Quick fix * Updated the panel position to the left + added an overlay between each search operation to notify the user * [react-search-refiners] Updated the screenshots + npm packages * Synced the remote branch from the upstream to merge things correctly * [react-search-refiners] Removed useless files generated by the upstream merge * [react-search-refiners] Removed remaining useless files
SharePoint Framework search with refiners and paging sample
Summary
This sample shows you how to build user friendly SharePoint search experiences using Office UI fabric tiles, custom refiners and paging.
An associated blog post is available to give you more details about this sample implementation.
Used SharePoint Framework Version
Applies to
Solution
| Solution | Author(s) |
|---|---|
| react-search-refiners | Franck Cornu (MVP Office Development at aequos) - Twitter @FranckCornu |
Version history
| Version | Date | Comments |
|---|---|---|
| 1.0 | January 03, 2018 | Initial release |
Disclaimer
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
Minimal Path to Awesome
- Clone this repository
- In the command line run:
npm installgulp serve
Web Part property pane options
The following settings are available in the Web Part property pane:
| Setting | Description |
|---|---|
| Search query keywords | The search query in KQL format. You can use search query variables (See this post to know which ones are allowed). |
| Query template | The search query template in KQL format. You can use search variables here (like Path:{Site}). |
| Selected properties | The search managed properties to retrieve. You can use these proeprties then in the code like this (item.property_name). (See the Tile.tsx file) . |
| Refiners | The search managed properties to use as refiners. Make sure these are refinable. With SharePoint Online, you have to reuse the default ones to do so (RefinableStringXX etc.). The order is the same as they will appear in the refnement panel. |
| Number of items to retrieve per page | Quite explicit. The paging behavior is done directly by the search API (See the SearchDataProvider.ts file), not by the code on post-render. |
| Show paging | Indicates whether or not the component should show the paging control at the bottom. |
Features
This Web Part illustrates the following concepts on top of the SharePoint Framework:
- Build an user friendly search experience on the top of the SharePoint search REST API with paging and refiners using the sp-pnp-js library.
- Integrate the @pnp/spfx-property-controls in your solution (PlaceHolder control).
- Integrate multiple Office UI Fabric components (DocumentCard, Panel, GroupedList, ...) to fit with the native Office 365 theme.
- Use the React container component approach inspiring by the react-todo-basic sample.