66 lines
3.0 KiB
Markdown
66 lines
3.0 KiB
Markdown
|
# 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.
|
||
|
|
|
||
|
|
<p align="center">
|
||
|
|
<img src="./images/react-search-refiners.gif"/>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
## Used SharePoint Framework Version
|
||
|
|
|
||
|
|
|
||
|
|
## Applies to
|
||
|
|
|
||
|
|
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||
|
|
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
|
||
|
|
Solution|Author(s)
|
||
|
|
--------|---------
|
||
|
|
react-search-refiners | Franck Cornu (MVP Office Development at aequos) - Twitter @FranckCornu
|
||
|
|
|
||
|
|
## Version history
|
||
|
|
|
||
|
|
Version|Date|Comments
|
||
|
|
-------|----|--------
|
||
|
|
1.0 | October 17, 2017 | 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 install`
|
||
|
|
- `gulp serve`
|
||
|
|
|
||
|
|
### Web Part property pane options
|
||
|
|
|
||
|
|
The following settings are available in the Web Part property pane:
|
||
|
|
|
||
|
|
<p align="center">
|
||
|
|
<img src="./images/property_pane.png"/>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
Setting | Description
|
||
|
|
-------|----
|
||
|
|
Search query | The search query in KQL format. You can use search query variables (See this [post](http://www.techmikael.com/2015/07/sharepoint-rest-do-support-query.html) to know which ones are allowed).
|
||
|
|
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](https://github.com/SharePoint/sp-dev-fx-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](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-todo-basic).
|
||
|
|
|
||
|
|
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-search-refiners" />
|