Friday, September 30, 2005

Stupid Rollover Tricks

One neat little trick which I have found that users like is the ability to highlight a cell as you mouse over it. In HTML DB 1.6, the Highlight Row feature was introduced as a part of Themes. With just a couple of small changes to your report template, you can take things up a notch, and provide your users with the ability to change the cell color as they mouse around an HTML DB Report.

First of all, create a report based on any table or view. Be sure to use the "Standard" Report Template, not the one with "Alternating Color Rows." If you want to use an Alternating Color Row template, you’ll have to make the changes below for both Odd and Even rows.

Once you have created your report, edit the Report Template which is associated with it. If you edit the page that your report is on, you should be able to see a link to your Report Template under the Shared Components: Templates section of the Application Builder.

Scroll down to the Before Each Row section and replace what is there with the following:

<tr style="cursor: pointer">

We need to remove the #HIGHLIGHT_ROW# link in order for cell highlighting to work. Also, we’re going to change the mouse cursor from the standard “I-Bar” to the “pointer” as the user hovers over the report. No good reason for this, other than to illustrate how it can be done. A list of other valid mouse cursor options can be found here:

Next, let’s edit the Column Templates section. Replace what is in Column Template 1 with the following:

<td class="t12data"#ALIGNMENT#
onMouseover="'#0f0'" onMouseout="'#fff'">#COLUMN_VALUE#</td>

You can choose which color to use as a highlight color by replacing #0f0 with your color’s hex code.

Save your changes, and give it a try! You can view a working example here:


Anonymous said...

Don't you know how this could be done with DIVs, background images and with onClick instead of onMouseOver?

I'm talking about this effect:
(click on the cells)

but not with DIVs in table cells just pure DIVs and you change the background image of each otherwise visible DIV instead of making them visible, like in that code above.


Scott said...


Yes, I realize that you can also achieve the same effect with DIVs. However, all of the built-in report templates in Apex use tables; thus my example based on tables.


- Scott -

Anonymous said...

Actually I asked whether you know how to make it with DIVs and background images because I didn't have a clue. :)

But since then I've found a solution here: