SharePoint Framework - Image Gallery

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

Image galleryImage gallery
Image with right side panelImage with right side panel

Application Component’s

  1. 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.
    Metadata column filteringMetadata column filtering
  2. 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
  3. Right side popup panel
    This is simply build using Office UI Fabric React Component (Panel)
  4. Pagination
    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.

Setting up the application

  1. Create a Department Term set with associated child terms, for example, HR, Information Services, Sales, Marketing
  2. Create an Image Library and add some sample images
  3. Tag each image with Department Metadata Column
  4. Also fill in Title field for each image, this is require for typed search functionality

Source Code

Explore solution on GitHub

Author: Ejaz Hussain
Reprint policy: All articles in this blog are licensed under CC BY-SA 4.0 unless stating additionally.