Conditional display in a SQL-Report/Report Region

Question

Hi,
here I have an example for "Conditional display in a SQL-Report/Report Region". I figured it out in Firefox 3.6.2 using Firebug as development tool on Apex 3.2.1.00.12.
First you have to put the following javascript code in the Page HTML-Header:
<script type="text/javascript">
<!--
// SOURCE
// W:\oracle\PRJ DWLS\javascript.07.js
// Beispiel Funktion zur bedingten Formatierung einer Tabellenzelle.
// Help (Substitution Strings):
// http://htmldb.oracle.com/pls/otn/wwv_flow_help.show_help?p_lang=de&p_session=2412201185523196&p_flow_id=4003&p_step_id=420,4003
// HTML Expression:
// <script>ex_conditional_td('R094260001010', #ROWNUM#, #COLNUM#-1);</script>#DFT_COND1#
function ex_conditional_td
( p_id
, p_rownum
, p_cellnum
  var l_td;
  l_td = vd_getColumn(p_id, p_rownum, p_cellnum);
  // hier die Bedingung definieren
  if (true) {
    l_td.style.color = '#808080';
}  // -- eof ex_conditional_td -- //
// Beispiel Funktion zum Abstellen der onMouse Funktionalität der Tabellenzeile
// HTML Expression:
// <script>ex_conditional_tr('R094260001010', #ROWNUM#);</script>#DFT_ID#"
function ex_conditional_tr
( p_id
, p_rownum
  var l_tr;    // TABLE.TR
  var l_td;    // TABLE.TR.TD
  if (true) {
    l_tr = vd_getRow(p_id, p_rownum);
    l_tr.onmouseover = null;
    l_tr.onmouseout  = null;
    for (var i=0; i<l_tr.cells.length; i++) {
      l_td = l_tr.cells;
l_td.style.backgroundColor = '#DDDDDD';
} // -- eof ex_conditional_tr() -- //
var g_DEBUG = false;
var g_TBODY = null;
// Liefert das Body-Element der Tabelle mit der ID <p_id>.
// Parameter
// p_id - die Id der HTML-Tabelle
// Return
// das Body-Element oder NULL, wenn die Zeile nicht gefunden wurde
function vd_getBody
( p_id
if (g_TBODY == null) {
var l_table = null;
l_table = document.getElementById( p_id );
if (l_table == null) {
l_table = document.getElementByName( p_id );
if (l_table != null) {
if (vd_debug()) {
alert("Tabelle gefunden, " + l_table.nodeName);
g_TBODY = vd_search( l_table, 'TD', 't10data', 'TBODY');
return g_TBODY;
} // -- eof vd_getBody() -- //
// Liefert die Zeile <p_rownum> der HTML-Tabelle mit der Id <p_id>.
// Parameter
// p_id - die Id der HTML-Tabelle
// p_rownum - die Zeilennummer
// Return
// die Zeile oder NULL, wenn die Zeile nicht gefunden wurde
function vd_getRow
( p_id
, p_rownum
var l_body = vd_getBody(p_id);
if ( l_body != null
&& l_body.nodeName == 'TBODY'
&& l_body.children[p_rownum].nodeName == 'TR') {
return l_body.children[p_rownum];
else {
return null;
} // -- eof vd_getRow() -- //
// Liefert die Spalte <p_column> der Zeile <p_rownum> der HTML-Tabelle mit der
// Id <p_id>.
// Parameter
// p_id - die Id der HTML-Tabelle
// p_rownum - die Zeilennummer
// p_column - der Index der Spalte / Zelle
// Return
// die Zelle oder NULL, wenn die Zelle nicht gefunden wurde
function vd_getColumn
( p_id
, p_rownum
, p_column
var l_tr = vd_getRow(p_id, p_rownum);
if ( l_tr != null
&& l_tr.nodeName == 'TR'
&& l_tr.children.length >= p_column
&& l_tr.children[p_column].nodeName == 'TD') {
return l_tr.children[p_column];
else {
return null;
} // -- eof vd_getColumn() -- //
// Rekursives Suchen nach einem Node.
// Zweck: Das bedingte Formatieren einer Tabellenzelle in einem Apex Standard
// SQL-Report.
// Diese Funktion durchsucht rekursiv, ab einem Ausgangsknoten <p_node>, alle
// darunter befindlichen Elemente, ob in dem Element <p_seachIn> sich die
// Klasse <p_class> befindet.
// Bei Standard-Reports ist die Reportzelle (TD) mit der Klasse
// "t10data" formatiert.
// Zunächst muss dazu die Tabellenzelle (TD) selbst, die übergeordnete
// Tabellenzeile (TR), der Tabellenbody (TBODY) oder die Tabelle (TABLE)
// selbst ermittelt werden.
// Der Beispielaufruf:
// var l_body;
// var l_node = document.getElementById( 'R112233' );
// l_body = search( l_node, 'TD', 't10data', 'TBODY');
// durchsucht also das mit der Id "R112233" versehene Element [der Report, für
// den in Apex eine statischen ID vergeben werden musste] rekursiv, bis er
// die [erste] Tabellenzelle "TD" findet, die als Klasse "t10data"
// definiert hat. Für diese ermittelt er dann das übergeordnete TBODY-Element.
// Parameter
// p_node - das Ausgangselement
// p_searchIn - der Knotenname, der durchsucht werden soll
// [node.nodeName == p_searchIn]
// p_class - der Name der CSS Klasse
// [node.classList[<index>] == p_class
// p_parentName - der Name [node.parentNode.nodeName == p_parentName]
// des Elements, das zurückgeliefert werden soll. Wird als
// p_parentName der Suchname p_searchIn angegeben, wird
// das Element selbst zurückgegeben.
// Return
// das per p_parentName gesuchte Element (TD, TR, TBODY, TABLE)
function vd_search
( p_node
, p_searchIn
, p_class
, p_parentName
var LN = "vd_search";
var l_element = null;
// DEBUG
if (vd_debug()) {
alert(LN + ":" + "Untersuche " + p_node.nodeName + ", id=" + p_node.id);
// 1) der aktuelle Knoten ist der, der durchsucht werden soll
if (p_node.nodeName == p_searchIn) {
if (p_node.classList.length > 0) {
for(var c=0; c<p_node.classList.length; c++) {
if (p_node.classList[c] == p_class) {
// Parent Node dynmisch suchen
l_node = p_node;
if (l_node.nodeName == p_parentName) {
return l_node;
while(l_node != null && l_node.parentNode != null) {
if (l_node.parentNode.nodeName == p_parentName) {
return l_node.parentNode;
else {
l_node = l_node.parentNode;
// 2) wenn nicht 1) oder nicht in 1) gefunden, dann in den Kindelementen
// weitersuchen
if (p_node.children.length > 0) {
var i = 0;
while (i<p_node.children.length && l_element==null) {
l_element = vd_search( p_node.children[i], p_searchIn, p_class, p_parentName);
i++;
return l_element;
} // -- eof vd_search() -- //
// Gibt an, ob Debug ein- (true) oder ausgeschaltet (false) ist.
// Return
// true - debug ist eingeschaltet
// false - debug ist ausgeschaltet
function vd_debug()
return g_DEBUG;
-->
</script>
Maybe you have to modify the "vd_getBody" function. I'm searching the table cell with having the class "t10data". When you use another theme, there's maybe another class used.
Second is, that you set an static id for your report region. I prefer this structure:
R<app-id><page-id><seq> (Raaaaappppsss) e.g. R094260001010.
First example is to turn off the onMouse-Effect. Maybe on the first or last column definition you put this code in the "HTML-Expression" area:
<script>ex_conditional_tr('R094260001010', #ROWNUM#);</script>#ID#This will call the example function ex_conditional_tr with the parameter
a) the region id
b) the rownum (as oracle always starts with 1 this is the first data row [rownum=0 is the table header row])
Second example is the conditional formatting of a table cell. Put this in the HML-Expression area:
<script>ex_conditional_td('R094260001010', #ROWNUM#, #COLNUM#-1);</script>#ENAME#This will call the example function ex_conditional_tr with the parameter
a) the region id
b) the rownum
c) the cellnum (here we have to subtract 1 to get the "real" cell index)
The "ex_conditional" functions are just a representation of how to get the row or cell node.
Hope this help a bit.
Tom

Answer 1

I would use a CASE statement in the select....
each CASE would be an img src tag for a different button if the button is an image.
does that make sense? I can include an example if you would like...