This post describe a SPFX application which implement an image gallery with taxonomy base filtering and typed search. This application also implement pagination.
My main aim is to build this application to get my hand dirty on SPFX, PnPJS, Office UI Fabric and related technologies.
Here is screenshot of the final output
- Taxonomy based filtering
This was not too complicated to build dynamic rest query based on selected metadata tag.
Trick involves using the hidden list field TaxCatchAll. This field exists for all rows having taxonomy data, and includes all the terms used.TaxCatchAll field.
- Typed Search
For this demo, I am using oData string query operation “startsWith”. You can build more complex query using other available oData query operations. Here is a nice article about oData Operations
- Right side popup panel
This is simply build using Office UI Fabric React Component (Panel)
I must admit, I have spent more time on Pagination component compare to others, I just wanted to get this into a shape where we can start using this in real world scenarios.I have built pagination quite number of times before using JSOM using ListItemCollectionPosition object.
First of all i would like say massive thank you to my colleague Vardhaman Deshpande to resolve an issue regarding pagination.
To Build pagination i have tried below 3 options:
Option1: I have tried using custom npm package for pagination react-js-pagination. Package works fine if you want to just build pagination without using any sort of filtering.
Option2: PnPJS using hasNext attribute. In this approach, You have to save whole return items object with hasNext attribute for both Next and Previous state. You can be achieved pagination but somehow I have preferred option3.
Option3: Similar to Option2 but you only need to save nextLink url into array for both Next and Previous state. This option also works fine with filtering.
- Create a Department Term set with associated child terms, for example, HR, Information Services, Sales, Marketing
- Create an Image Library and add some sample images
- Tag each image with Department Metadata Column
- Also fill in Title field for each image, this is require for typed search functionality