Menu

Using Alternating Row Formatting in Report Writer HTML Templates

Google+0
LinkedIn0

Automatically alternating row formatting is a great way to make your report easier to read and more visually pleasing, especially when your report can output a lot of rows.

RW Alternating row lines

Report Writer allows us to set alternating row formatting in the Style tab. However, that formatting only applies to the standard display. As soon as you start building your own custom HTML template, these options are ignored.

Report Writer row formatting

 

 

 

 

 

 

Defining row formatting with custom styles

Like our guide on creating a cover page image with dynamic content, you can accomplish alternating row formatting with CSS. This post will be very brief but you can visit our cover page guide for more details on using CSS with Report Writer.

For the example at the top, I wanted to keep the first row defined as I already had it in the editor and start my alternating rows with the 2nd row. I accomplished this by adding the following to the CSS box under the Style tab and referencing TFtable in my report (be save to hit Save in RW to apply the style):

table.TFtable {width:100%; border-collapse:collapse; font-size: 8pt;}
table.TFtable td{padding:3px; border:#4e95f4 0px solid;}
table.TFtable tr{padding-left:3px; padding-right:3px;}
table.TFtable tr:nth-child(2n+3){background: #F8F8F8;}
table.TFtable tr:nth-child(even){background: #FFFFFF;}

The first three lines define overall table, cell, and row style. You may want to copy those from your existing table definition in the HTML area and adjust as desired.

The last two lines deal with the odd and even rows. For all the even rows, I needed to apply #FFFFFF background. For all the odd rows starting with the 3rd one, I needed #F8F8F8.

If you’d like to do something more advanced than just even/odd, you can do that as well. Here is a good guide for understanding nth-child in CSS.

If you’re looking to change more than just the background, you can add in any other style elements you’d like, just put a semicolon between each one.

Do you have any neat CSS tricks you’ve used in Report Writer or would like to figure out? Let us know in the comments. 

 

Want to do more?

Do you want to do more of your own ConnectWise reporting in Report Writer, Power BI, or another reporting tool? Contact usfor one-on-one help or connect with us on the ConnectWise subreddit or the ConnectWise University Forums.

 

Related Posts