2021-01-31 12:43:28 +00:00
# List Search
## Summary
This list search web part allows the user to show data from lists or libraries. The web part can be used to (for more details see images below):
2021-05-01 22:04:22 -04:00
* [Show merged items from different lists/libraries ](#merge-items-from-different-listslibraries )
2021-01-31 12:43:28 +00:00
* [Open item data in modal window (same data shown in the table) ](#merge-items-from-different-listslibraries )
* [Select render by field type ](#select-render-of-the-selected-fields )
* [Open item detail in modal window (it allows to select the fields to show by list) ](#open-selected-item-with-selected-properties )
* [Open documents in modal window ](#open-documents-in-modal-window )
* [Open documents in new tab ](#open-documents-in-new-tab )
* [Use of dynamic data ](#use-of-dynamic-data )
* [Redirect to url ](#redirect-to-url-depends-on-selected-item )
* Other useful functionalities:
2021-04-25 14:01:36 +02:00
* List item modern audience support
2021-01-31 12:43:28 +00:00
* General filter - the user can select which columns are filtered and which not
* Column filter on each column
* Item limit to show
* Item pagination
* Group items by any field
2021-02-10 23:59:54 -05:00
* Cache to retrieve the items
2021-01-31 12:43:28 +00:00
* Get section color
* Show item count with custom message
2021-05-01 22:04:22 -04:00
### Merge items from different lists/libraries
2021-02-10 23:59:54 -05:00

2021-01-31 12:43:28 +00:00
2021-05-01 22:04:22 -04:00
### Select render of the selected fields
2021-02-10 23:59:54 -05:00

2021-01-31 12:43:28 +00:00
2021-05-01 22:04:22 -04:00
### Open documents in modal window
2021-02-10 23:59:54 -05:00

2021-01-31 12:43:28 +00:00
2021-05-01 22:04:22 -04:00
### Open documents in new tab
2021-02-10 23:59:54 -05:00

2021-01-31 12:43:28 +00:00
2021-05-01 22:04:22 -04:00
### Use of dynamic data
2021-02-10 23:59:54 -05:00

2021-01-31 12:43:28 +00:00
2021-05-01 22:04:22 -04:00
### Open selected item with same data
2021-02-10 23:59:54 -05:00

2021-01-31 12:43:28 +00:00
2021-05-01 22:04:22 -04:00
### Open selected item with selected properties
2021-02-10 23:59:54 -05:00

2021-01-31 12:43:28 +00:00
2021-05-01 22:04:22 -04:00
### Redirect to url depends on selected item
2021-01-31 12:43:28 +00:00
2021-02-10 23:59:54 -05:00

## Compatibility





2021-01-31 12:43:28 +00:00
## Applies to
* [SharePoint Framework ](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview )
* [Office 365 tenant ](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment )
## Solution
Solution|Author(s)
--------|---------
2021-05-01 22:04:22 -04:00
react-list-search | [Alberto Gutiérrez ](https://github.com/albegut ) ([@albertogperez ](https://twitter.com/albertogperez ))
2021-01-31 12:43:28 +00:00
## Version history
Version|Date|Comments
-------|----|--------
2021-04-25 14:01:36 +02:00
1.0.0|December 20, 2020|Initial release
1.1.0|April 25, 2021|List item modern audience support
2021-01-31 12:43:28 +00:00
## Minimal Path to Awesome
### Dev Mode
2021-02-10 23:59:54 -05:00
2021-01-31 12:43:28 +00:00
* Clone this repository
* In the command line run:
2021-02-10 23:59:54 -05:00
* Navigate to `list-search-webpart`
2021-01-31 12:43:28 +00:00
* `npm install`
* `gulp serve`
* Open the *workbench* on your Office 365 Developer tenant
* Test out the web part
### Sppkg
2021-02-10 23:59:54 -05:00
* Download `.sppkg` files from `sppkg` folder
* Upload files to **App Catalog**
2021-04-25 14:01:36 +02:00
* Approve the API permissions in the new SP admin center (only needed if you are going to enable list item modern audience)
2021-01-31 12:43:28 +00:00
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework:
* Using react for building SharePoint Framework client-side web parts
2021-02-10 23:59:54 -05:00
* Using [PnP Js ](https://pnp.github.io/pnpjs ) to retrieve SharePoint data
2021-01-31 12:43:28 +00:00
* Using [PnP Js ](https://pnp.github.io/pnpjs/odata/caching ) to cache SharePoint data
* Connection between SharePoint Framework components using dynamic data
2021-05-01 22:04:22 -04:00
* [Support of section backgrounds color ](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds )
2021-01-31 12:43:28 +00:00
* [Custom property pane control ](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/build-custom-property-pane-controls )
2021-02-10 23:59:54 -05:00
* Use [react-js-pagination ](https://www.npmjs.com/package/react-js-pagination ) library
2021-01-31 12:43:28 +00:00
2021-05-01 22:04:22 -04:00
## 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.**
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue ](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-list-search&authors=@albegut&title=react-list-search%20-%20 ).
For questions regarding this sample, [create a new question ](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-list-search&authors=@albegut&title=react-list-search%20-%20 ).
Finally, if you have an idea for improvement, [make a suggestion ](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-list-search&authors=@albegut&title=react-list-search%20-%20 ).
2021-01-31 12:43:28 +00:00
< img src = "https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-list-search" / >