Focal Point
[SOLVED] Alternating data row colors with CSS

This topic can be found at:
http://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/796104415

August 23, 2010, 11:24 AM
bflemi3
[SOLVED] Alternating data row colors with CSS
Hello all,

I was hoping someone could point me in the right direction so I could learn how to use css to create alternate row colors within the data portion of a webfocus report.

Thanks for the help,
B

This message has been edited. Last edited by: Kerry,


WebFOCUS 7.7
Windows
All Output (Excel, HTML, PDF)
August 23, 2010, 11:32 AM
Norb Eckert
I find it easier to let WebFocus handle the alternate row colors in the style sheet.

TYPE=DATA, BACKCOLOR=( 'WHITE' RGB(224 255 255) ), $

The line above alternates data rows with white and light cyan backgrounds.

Hope that helps,

Norb


prod:7.6.9, win2k3 mre, caster, bid, devstudio 7.6.9
August 23, 2010, 11:41 AM
bflemi3
I agree, but I am using a css class with type=data so the line type=data,backcolor=... is ignored.


WebFOCUS 7.7
Windows
All Output (Excel, HTML, PDF)
August 23, 2010, 12:15 PM
Francis Mariani
Do it the old-fashioned way, with a flag or indicator:

TABLE FILE CAR
PRINT
COUNTRY CAR MODEL BODYTYPE

COMPUTE CLASSFLAG/A1 = IF CLASSFLAG EQ '' THEN '2' ELSE ''; NOPRINT

ON TABLE SET PAGE NOLEAD
ON TABLE SET STYLE *
TYPE=REPORT, SQUEEZE=ON, $
TYPE=DATA, CLASS=class2, WHEN= CLASSFLAG EQ '2', $
TYPE=DATA, CLASS=class1, WHEN= CLASSFLAG EQ '', $
ENDSTYLE

ON TABLE HOLD AS H001 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<STYLE>
body { font-family: Arial, sans-serif; font-size: 12px; }
.class1 { background-color: yellow; }
.class2 { background-color: red; }
</STYLE>
!IBI.FIL.H001;
-HTMLFORM END



Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
August 23, 2010, 12:43 PM
bflemi3
Thanks Francis,

Can you explain what !IBI.FIL.H001; means?


WebFOCUS 7.7
Windows
All Output (Excel, HTML, PDF)
August 23, 2010, 01:02 PM
Darin Lee
That's the way you insert the contents of your report (ON TABLE HOLD FORMAT HTMTABLE) into the HTMLFORM: !IBI.FIL.filename


Regards,

Darin



In FOCUS since 1991
WF Server: 7.7.04 on Linux and Z/OS, ReportCaster, Self-Service, MRE, Java, Flex
Data: DB2/UDB, Adabas, SQL Server Output: HTML,PDF,EXL2K/07, PS, AHTML, Flex
WF Client: 77 on Linux w/Tomcat
August 23, 2010, 01:03 PM
Francis Mariani
!IBI.FIL.file-name;
drops the HOLD file into a HTMLFORM. How did you create the HOLD file and define the CSS classes?


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
August 23, 2010, 01:17 PM
bflemi3
-HTMLFORM BEGIN
   <style>
     .Indent {
        padding-right: 28px;
    font-size: 8pt;
    font-family: Arial;
     }
   .NoIndent {
    font-size: 8pt;
    font-family: Arial;
 }
 .TotalIndent {
  padding-right: 28px;
    font-size: 8pt;
    font-family: Arial;
  font-weight:bold;
  border-top-style:solid;
  border-top-color:black;
  border-top-width:1px;
 )
   </style>
-HTMLFORM END

then use this line to reference...
ON TABLE SET CSSURL mycss.css

So you're saying I don't have to use that line?

Actually, I think I understand. It looks like you're creating the hold file first then passing that to an html form, where as I'm just embedding css into my focus code and referencing the css classes. Am I correct?
  
  
  
  
  
  

This message has been edited. Last edited by: bflemi3,


WebFOCUS 7.7
Windows
All Output (Excel, HTML, PDF)
August 23, 2010, 02:41 PM
Francis Mariani
Correct.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
August 23, 2010, 02:48 PM
bflemi3
Awesome, thanks Francis!

How can I learn more about incorporating html/javascript and style sheets into my focus code? Are there any websites/documentation/tutorials you're aware of?


WebFOCUS 7.7
Windows
All Output (Excel, HTML, PDF)
September 07, 2010, 08:16 AM
Wep5622
That solution gets tedious (impossible?) once you're dealing with across-columns. I haven't found the correct way to deal with those yet, a suggestion would be appreciated.

In CSS3 you can use the new nth-child selector, eg:
tr:nth-child(odd) > td.data { background-color: yellow; }
tr:nth-child(even) > td.data { background-color: red; }


Unfortunately we use IE6...


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
September 07, 2010, 10:58 AM
Wep5622
quote:
Originally posted by Wep5622:
That solution gets tedious (impossible?) once you're dealing with across-columns. I haven't found the correct way to deal with those yet, a suggestion would be appreciated.


Never mind, I just remembered there's ACROSSCOLUMN=...


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :