Interlace color change after hidden line-FineReport Help Document

Last update： 2022-01-07

I. Overview

1. Problem description

If we set the interlaced color on the report (Different Row Background Color), and set the conditional formatting to hide the row height, the original interlaced color will look messy.

For example, the effect of interlaced color change after hiding the line with Shipper as 1 is as follows:

How to keep the interlaced discoloration after hiding the lines?

2. Solutions

Solution 1: Use the formula IF() when setting the background color. If the condition of the hidden line is satisfied, the hidden line will not perform the condition of interlaced color change, otherwise it will be performed.

Solution 2: Add the Loading end event in Template>Web Attributes>Pagination Preview, using JavaScript code to achieve.

II. Example

1. Prepare template

Open the template: Set the background color interlaced.cpt

2. Hidden rows

Select cell E2 and add a condition: when the carrier is equal to 1, the row height is 0. Select Row Height from the attribute, the condition type is Common, and the condition is set to Equal to String '1', and click Add when finished. The steps are shown in the figure below:

3. Scheme 1: Set the background color

Modify the formula in the Conditional Attributes> Background setting of cell A2 to: IF(E2!=1,SEQ()%2=0,FALSE)

4. Scheme 2: Add loading end event

1) After setting the hidden row, delete the original Conditional Formatting of cell A2.

2) Click the menu Template>Web Attributes>Pagination Preview, and select Individually set for the template. In the event settings at the bottom of the page, click the Add button, select the Loading end event, and enter the JavaScript code in the pop-up event setting dialog box as follows:

$(".x-table tr:visible").each(function(i) {
if (i % 2 == 0 && i >= 1) {
$(this).css("background-color", "#ccccfd");
}
});

Note: Among them, the 1 in i>=1 is obtained by subtracting 1 from the row number of the cell that started to change color.

The steps are shown in the figure below:

5. Effect preview

1) PC terminal

Save the report, click Pagination Preview, the effect is as shown in the figure below:

2) Mobile terminal

Both App and HTML5 are supported, and the effect is shown in the following figure:

III. JS example of dashboard

What should I do if I want to use JS events in the decision report to achieve the same effect?

1. Make a template

To create a new dashboard, drag a report block into the dashboard. The table design in the report block is consistent with the above template. And add the same conditional formatting to cell E2, and cell A2 does not set conditional formatting.

2. Add post-initialization event

Select the report block, click "Events" in the right panel, add the "After initialization" event, and enter the JavaScript code as follows:

setTimeout(function() {
	$(".x-table tr:visible").each(function(i) {
		if (i % 2 == 0 && i >= 1) {
			$(this).css("background-color", "#ccccfd");
		}
	});
}, 1000);

The steps are shown in the figure below: