Colored text in section header on Xpage

Question

I really want to set some different colors based on different values in the header of a section. Header is computed like this:

var stat = rowData.getColumnValue("Status");
var sectionText = rowData.getColumnValue("Subject") + " " + rowData.getColumnValue("Status");
if (stat == "New") {
    return sectionText + " * Obs new ticket * ".toUpperCase(); //some color here
} else if (stat == "Treated") {
    return sectionText;
} else if (stat == "Staff") {
    return sectionText;
} else {
    return sectionText + " * Obs new answer from customer *".toUpperCase(); //and maybe some different color here
}

This code works just fine, but if I try to add some color to the different values it won't work. Any idea how to do this? So far I have tried CSS, but I can only get colors in the background or the text of the section it self, not in the header. The section is in a column of a Data Table.

score 1 · Answer 1 · answered Apr 03 '13 at 11:03

You can set the headerStyle attribute of the xp:section to add CSS to header. You can even compute it so that it can be different for each section in your Data Table depending of conditions. Something like this:

<xp:section .....>
    <xp:this.headerStyle><![CDATA[#{javascript:if (someVar == true) {
    return "color:rgb(128,0,128)";
} else {
    return "color:rgb(128,0,0)";
}}]]></xp:this.headerStyle>
    .....
    .....
    .....
</xp:section>

Colored text in section header on Xpage

1 Answers1