Use Adaptive Tags to alternate row colors

The ability to alternate row colors exists in the WCI portal style sheets, but it’s not completely obvious how to get nice alternating background colors where you’re rendering a list like search results.

There’s some documentation on how to create an adaptive layout Knowledge Base page that’s unusually comprehensive, and it sheds some light on a little trick: Adaptive Tags can do basic math with pt:logic.intexpr.

So for example, you could work your way through a $result list variable and run a mod operator on the index, which basically allows you to compute the remainder of a division operation. Which means, if you divide by 2 for every integer, the remainder will be zero half of the time and 1 the other half.

Using this nugget of knowledge, we can write code like this to alternately apply a background style color to each row of a table:

<pt:logic.intops pt:expr="($result.rank) % 2" pt:key="remainder" />
<pt:logic.intexpr pt:expr="($remainder) > 0" pt:key="isOdd" />
<pt:logic.if pt:expr="$isOdd">
		<tr height="25" class="listText listItemOneBG">
		<tr height="25" class="listText listItemTwoBG">

Credit to Rick Ptasnik for sharing this code a couple of years ago!

Tags: , ,

Leave a Reply