Cell Text Twinkling via CSS and Conditional Formatting

1.1 Requirement

In making a report, to highlight cells that meet certain conditions, some special effect processing, e.g., adding cell twinkling effect, is often needed. How can we achieve this?

See the demonstration below:

1.2 Solution

Use the New Value attribute of Conditional Formatting: CONCATENATE("<div style='animation:twinkling .75s linear infinite'>" + $$$ + "</div>"), set display content in cells to display by HTML and enable cell twinkling through CSS.

2.1 Add a conditional formatting

1) Right-click I2 and add a Conditional Formatting.

2) Add a color attribute and set it to red:

3) Add a New Value attribute and input the following formula: CONCATENATE("<div style='animation:twinkling .75s linear infinite'>" + $$$ + "</div>"):

4) Choose Formula, input the formula $$$ > 12 and click Add.

See the figure below:

2.2 Set to display by HTML

Click I2, click on the Cell Attributes icon in the right-hand pane, choose Other and set Display Content to Display by HTML:

2.3 Add a custom CSS style

Add a custom CSS file, e.g., T1.css, to the working directory %FR_HOME%\webapps\webroot\help\css.

Input the following CSS codes:

@keyframes twinkling{
0%{
         opacity:0;
} 
100%{
         opacity:1;              
}
}
@-moz-keyframes twinkling {
/* Firefox */
0%{
         opacity:0;            
} 
100%{
         opacity:1;                 
}
}
@-webkit-keyframes twinkling{
/* Safari 和 Chrome */
0%{
         opacity:0;             
} 
100%{
         opacity:1;              
}
}
@-o-keyframes twinkling {
/* Opera */
0%{
         opacity:0;          
} 
100%{
         opacity:1;                
}
}
Show Code

2.4 Import the CSS file

Click Template> Web Attributes>Reference CSS, select the new CSS file and click Add. See the figure below:

2.5 Preview

Save the template and preview the report. The effect is shown below.

3.1 Download the template

Set Enable Cell Twinkling through CSS.cpt

3.2 Download the CSS file

T1.css