Tuesday, November 03, 2009

Handling information overload: Showing data on demand in an IR

Using APEX Interactive Reports you can let the user decide which columns to show or hide in a report. But even then, reports with over 20 columns are still being used. So I tried to come up with a solution where you can hide less important (detail) column information and still reveal that information with minimal effort - like a mouse-over event. In this tiny example the list of employees of a department pops up when the user moves his mouse over the little question mark icon.
By adding some HTML and Javascript in the select statement (I know, that is not a "best practice"...but if you've got a better idea, please drop a comment) and some CSS you can use this technique - even for more complex "detail" reports!
The select statement used in this example is:
select dept.deptno
, dname
, loc
, 'onmouseover="javascript:$(''.overlay'').hide();$x_Toggle('''||dept.DEPTNO||''')">'||
'' enames
from dept
, ( select deptno, listagg( ename, ', ') within group (order by sal) enames
from emp
group by deptno
) emps
where emps.deptno (+) = dept.deptno
The CSS used in that statement is defined by:
One remark: You should disable sorting, filtering etc. on the "enames" column, because that makes no sense...

Edit: Thanks to Alex (see comments) the solution can be changed to something more elegant:
Just select the ENAMES column, and set these properties
- Link Text = <img src="#IMAGE_PREFIX#apps_info.gif" alt=""></a><div class="overlay" id="#DEPTNO#" style="display:none">#ENAMES#</div>
- Link Attributes = onmouseover="javascript:$('.overlay').hide();$x_Toggle('#DEPTNO#');"
- Target (URL) = javascript:void(0);

So the SQL is "clean" now and you even can enable the sorting etc again!
Post a Comment