One of the recurring requests back in the days of Classic SharePoint Seach was alternating row, aka every second row would have another background color.
We haven't supported this in PnP Modern Search yet, but this sample will show how you can implement it yourself.
Changing the background color is no problem but how can we ensure that only every other row is changed?
While inspecting the Elements it sure looks like we have a "data index" providing the info we needs in order to determine if a row is even or odd.
I wasn't sure if the build-in Handlebars helpers included "Modulo", and a search in the PnP Modern Search source code didn't provide any hits, but trial and error proved that the project indeed supported Modulo :-)
The logic is super simple, if the modulo check returns even, that change the color to a color of your choice. If it is Odd, use the default color.
{{#eq (modulo @index 2) 0 }}
<li class="template--listItem" style="background-color: rgb(192, 222, 222);">
{{else}}
<li class="template--listItem">
{{/eq}}
And voila:
The layout is available at pnp-modern-search-layouts/Results/Handlebars/List Alternating background color at main · microsoft-search/pnp-modern-search-layouts (github.com)
Comments