How to create multi level reports?

Question

The report I have created contains 25 columns and is to wide. I would like to create a multi level report in the fashion of below:
Col 1 Col 2 Col 3
Row1 Row1 Row1
Row2 Row2 Row2
Col 5 Col 6 Col 7
Row1 Row1 Row1
Row2 Row2 Row2
I am assuming this needs to be done by modifying html in a template.
I have cut up a normal report to try and illistrate what I am thinking.
http://i71.photobucket.com/albums/i124/breinhar/multirow.jpg
I greatly appreciate the help. Thanks.

Answer 1

Hi,
OK - I've put together a horizontal scrolling report template for a Theme 12/Standard report: [http://apex.oracle.com/pls/otn/f?p=33642:198]
To create this, you need to:
1 - Through Shared Components, Templates - create a new Report Template based on a copy of the existing Standard report template.
2 - When you have your new template, edit it.
3 - In the template's "Before Rows" setting, replace what's there with the following:
<style type="text/css">
#table1 th {white-space: nowrap}
#table1 td {white-space: nowrap}
#table2 th {white-space: nowrap}
#table2 td {white-space: nowrap}
</style>
<table cellpadding="0" cellspacing="0" summary="" style="padding:0px; border-collapse:collapse;">#TOP_PAGINATION#
<tr><td>
  <tr>
    <td style="vertical-align:top; background-color:#EFEFEF; padding:0px; border:1px solid darkgray;">
      <div id="d1" style="background-color:white; margin:0px; border:0px; padding:0px;">
      </div>
    </td>
    <td style="vertical-align:top; padding:0px; border:1px solid darkgray;">
      <div id="d2" style="overflow-X:scroll; margin:0px; border:0px; padding:0px; border-right:1px solid darkgray;">
<table cellpadding="0" border="0" cellspacing="0" summary="" class="t12Standard" id="table2">4 - In the template's "After Rows" setting, replace what's there with the following:
      </div>
    </td>
  </tr>
</table><div class="t12bottom">#EXTERNAL_LINK##CSV_LINK#</div></td></tr>#PAGINATION#</table>
<script type="text/javascript">
var d1 = document.getElementById("d1");
var t2 = document.getElementById("table2");
var t1 = t2.cloneNode(false);
t1.style.width = "100%";
t1.id = "table1";
d1.appendChild(t1);
var t2Rows = t2.rows;
var k;
var r;
var c;
for (k = 0; k < t2Rows.length; k++)
r = document.createElement("TR");
t1.appendChild(r);
c = t2Rows[k].cells[0].cloneNode(true);
r.appendChild(c);
t2Rows[k].deleteCell(0);
d1.innerHTML += "";
</script>5 - On your report's Report Attributes, change the template used for the report from "Standard" to your new one
6 - Also on the report's Report Attributes, set "Enable Partial Page Refresh" to No - this is required as we need the javascript in the template to be run whenever pagination happens and Partial Page Refresh does not seem to allow us the means to trigger javascript
7 - Finally, on the report region's Region Footer, add in:
<style type="text/css">
#d1 {width:75px;}
#d2 {width:500px;}
</style>#d1 refers to the width of the frozen column and #d2 is the width of the rest of the report - you can adjust these figures as required.
The template contains two DIV tags - d1 and d2. Initially, d1 is empty and d2 contains the report. The javascript moves the first cell in each row from d2 to d1. The styles then add the scrolling functionality.
Andy