Skip to main content

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: http://www.marcato.org/luke/web/cursors.html

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

<td class="t12data"#ALIGNMENT#
onMouseover="this.style.background='#0f0'" onMouseout="this.style.background='#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: http://htmldb.oracle.com/pls/otn/f?p=33582:1

Comments

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)

http://kabelszat2002.hu/~vulcan/Example/cell-highlight.html

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.

Thanks
Jim
Scott said…
Jim,

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.

Thanks,

- 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:

http://www.webdeveloper.com/forum/showthread.php?p=628792

Jim

Popular posts from this blog

Thanks, ODC (Oracle Developer Community)!

I owe a lot of thanks to the ODC - which stands for Oracle Developer Community.  What is ODC?  You may remember it as OTN, or the Oracle Technology Network.  Same people, different name.  Why they changed it I can't say.  People just liked it better that way... (love that song)

In any case, what am I thankful for?  A lot.  To start, the tools that I use day in and day out: SQL Developer, ORDS, Oracle Data Modeler, SQLcl and - of course - APEX.  Without these tools, I'm likely on a completely different career path, perhaps even one that aligns more closely with my degree in television management.

While the tools are great, it's really the people that make up the community that make ODC stand out. From the folks who run ODC and the Oracle ACE program to the developers and product managers who are behind the awesome tools, the ODC community is one of, if not the greatest asset of being involved with Oracle's products.

If you have yet to get more involved with this communi…

Spaced Out

A while back, I wrote about how to give the Universal Theme a face lift.  If you follow the steps in that post, the base font for an APEX application with the Universal Theme can easily be changed.

While that's all well and good, sometimes you only want to change the font for a report, not the entire page.  One of the applications that I'm building contains a number of IRs based mostly on log data.  Thus, having that data in a monospaced font would make it a whole lot easier to read.

You can search Google Fonts for monospaced fonts by selecting only that option on the right-side menubar.  You can also opt for the standard yet kinda boring Courier and achieve the same thing.

To implement this in your application, follow the steps in my other post, but stop shy of the final step.  Instead of pasting in the text that I specify, paste in the following to the Custom CSS field in Theme Roller, using the name of the font you selected for the font-family:

.a-IRR-table tr td { font-fam…

Logging APEX Report Downloads

A customer recently asked how APEX could track who clicked “download” from an Interactive Grid.  After some quick searching of the logs, I realized that APEX simply does not record this type of activity, aside from a simple page view type of “AJAX” entry.  This was not specific enough, and of course, led to the next question - can we prevent users from downloading data from a grid entirely?

I knew that any Javascript-based solution would fall short of their security requirements, since it is trivial to reconstruct the URL pattern required to initiate a download, even if the Javascript had removed the option from the menu.  Thus, I had to consider a PL/SQL-based approach - one that could not be bypassed by a malicious end user.

To solve this problem, I turned to APEX’s Initialization PL/SQL Code parameter.  Any PL/SQL code entered in this region will be executed before any other APEX-related process.  Thus, it is literally the first place that a developer can interact with an APEX page…