top of page
  • Writer's pictureKasper Larsen

Flags in the PnP Modern Search filter

After reading the article by @GaneshSanap20 about displaying country flags in Lists using JSON I started wondering how to apply this to PnP Modern Search.

The first step was to create the termset in the Term store and add a Nationality User Property in the User Profile Application.

After updating a few users with a value in the Nationality the wait started. I "cheated" and used Todd Klints script in the Script Samples | PnP Samples repositoty to speed up the reindexing.

As the Flags API & CDN – API is using the ISO 3166 Country code I have to figure out a way to associate the Country code to the Term in the Term Store.

First approach: Term value

I had hoped that Term custom properties might be indexed as that would allow me an easy way to "map" the Country code to the Term, no matter which language(s) that are used.

Unfortunately Custom Properties are not indexed so that approach was a dead end.

Second approach: Hardcoding

Just as a proof of concept I decided to use a brute force approach and hardcode a switch-like statement in the Refiner layout.

Just grab the default Vertical Refiner layout and copying the layout code into a VS Code file and setting the "use an external template URL" to point to that file. This allows you to update the code and just press F5 to check the result :-)

Some trial and error revealed that adding the flag right af the pnp-filtercheckbox gave a pretty good result. Initially I expected that "value" was the property that contained the Term Label, however value contains the filter hash, so I had to use the name property.

After adding a little CSS the final result looks like this.

59 views0 comments


bottom of page