APEX Report meets jQuery

04.
Februar
2011
Veröffentlicht von: Markus Dötsch

Bei der Darstellung eines Reports in APEX spielt der benötigte Platz oft eine große Rolle. Dann wird die berühmte Frage gestellt: Welche Spalte ist nicht so wichtig und kann weggelassen werden oder wenigstens an das Ende des Reports und damit evtl. außerhalb des immer sichtbaren Bereiches im Browser gestellt werden?

Bei der Darstellung eines Reports in APEX spielt der benötigte Platz oft eine große Rolle. Dann wird die berühmte Frage gestellt: Welche Spalte ist nicht so wichtig und kann weggelassen werden oder wenigstens an das Ende des Reports und damit evtl. außerhalb des immer sichtbaren Bereiches im Browser gestellt werden?

Aus diesem Grund wäre es doch nicht schlecht, wenn immer nur die wichtigsten Spalten eines Reports dargestellt werden würden und die restlichen Daten nur auf Anforderung des Anwenders. Die Grundidee dabei könnte sein, dass sobald auf eine Zeile geklickt wird zusätzliche Daten angezeigt werden, ohne dass die Seite neu geladen wird. Beim erneuten Klicken auf die Zeile verschwinden diese Zusatzdaten wieder.

APEX bringt in der Version 4 die Voraussetzungen für eine dynamische, eventgetriggerte Webseite automatisch mit. Die mitgelieferte JavaScript-Bibliothek jQuery birgt alle benötigten Möglichkeiten. Auch in der Version 3 von APEX läßt sich jQuery ohne Probleme integrieren. Hier muss man sich allerdings selbst um die Einbindung der notwendigen JavaScript-Dateien kümmern.

Bevor wir mit der Umsetzung beginnen sollten wir uns also überzeugen, dass in der APEX-Applikation im <head> Bereich der HTML-Seite die jQuery-Bibliothek eingebunden ist.

<script src="/i/libraries/jquery/1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>

Dieser Tipp beschreibt eine Möglichkeit, wie die Verbindung von Report und jQuery konkret im APEX-Umfeld umgesetzt werden kann.

Darstellung aller Informationen

Basierend auf der Grundidee sieht der Quellcode eines aufklappbaren Reports so aus, dass die Bereiche, die nur auf Klick hin zu sehen sein sollen, grundsätzlich im Code ausgegeben werden, aber mit CSS-Mitteln bei der Darstellung ausgeblendet werden. Damit kann mit einem Klick auf eine Zeile reagiert werden und der dazugehörige Bereich eingeblendet werden. Ein erneuter Klick sorgt dafür, dass dieser wieder verschwindet.

Die in den APEX-Themes mitgelieferten Report-Templates bieten keine Möglichkeit einen Datensatz in mehreren Zeilen ausgeben zu lassen. Hier können nur HTML-Bereiche für eine Spalte definiert werden (column template). Es gibt aber eine zweite Art von Report-Templates – Named Column (row template).

Mit diesen Templates kann man nicht einfach alle Spalten im Report darstellen die vom SQL-Statement geliefert werden, sondern man muss genau angeben welche Spalte wo im HTML-Code ausgegeben werden soll. Und genau das wollen wir ausnutzen.

Erstellen des Report-Templates

Wir erstellen über die Shared Components -> Templates ein neues Report-Template from Scratch und wählen beim Template Type Named Column aus.

Das damit neu erstellte Template ist relativ leer und muss nun an den verschiedenen Stellen mit HTML-Code gefüllt werden.

Das wichtigste ist der Bereich Row Templates. Angepasst für ein Select-Statement wie select * from emp könnte der HTML-Bereich so aussehen:

<tr name="tr#ROWNUM#">
 <td class="data">#EMPNO#</td>
 <td class="data">#ENAME#</td>
 <td class="data">#JOB#</td>
 <td class="data">#MGR#</td>
 <td class="data">#COMM#</td>
 <td class="data">#DEPTNO#</td>
</tr>
<tr>
 <td colspan="6">
  <div name="div#ROWNUM#" style="display: none;">
    <table>
     <tr>
      <td>Einstellungsdatum: #HIREDATE#</td>
      <td>- Gehalt: #SAL#</td>
     </tr>
    </table>
   </div>
 </td>
</tr>

Über den substitution string #ROWNUM# erreichen wir eine Durchnummerierung der einzelnen Zeilen und der Divs welche wir ausblenden wollen. Über die einzelnen Spalten-Variablen (#EMPNO, usw.) werden die Werte im Report ausgegeben.

  • In der ersten Zeile (<tr>) werden die Werte ausgegeben, die immer zu sehen sein sollen.
  • Im Div-Bereich im zweiten <tr> die Werte,  die nur auf Klick zu sehen sein sollen. Über den Zusatz style='display: none' wird erreicht, dass dieser Div standardmäßig ausgeblendet wird.

Im Template muss noch der Bereiche Before first and after last row text befüllt werden. Hier wird die Tabelle definiert, die den Report umgibt sowie die Kopfzeilen des Reports.

Bei Before Rows Tabelle und Kopfzeile …

 <table cellpadding="0" border="0" cellspacing="0" summary="" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">#TOP_PAGINATION#
 <tr>
  <td>
   <table cellpadding="0" border="0" cellspacing="0" summary="" class="report-standard">
    <tr>
     <th #ALIGNMENT# id="EMPNO" class="header">EMPNO</th>
     <th #ALIGNMENT# id="ENAME" class="header">ENAME</th>
     <th #ALIGNMENT# id="JOB" class="header">JOB</th>
     <th #ALIGNMENT# id="MGR" class="header">MGR</th>
     <th #ALIGNMENT# id="COMM" class="header">COMM</th>
     <th #ALIGNMENT# id="DEPTNO" class="header">DEPTNO</th>
    </tr>

… und bei After Rows das schließende Table-Tag und wenn gewünscht der CSV-Link und die Ausgabe der Pagination.

  </table><div class="CVS">#EXTERNAL_LINK##CSV_LINK#</div></td>
 </tr>
 #PAGINATION#
</table>

Wenn die Pagination mit ausgegeben werden soll, müssen auch noch die Bereiche unter Pagination mit Leben gefüllt werden. Hier kann man den HTML-Code aus anderen Report-Templates kopieren.

Zuweisung des neuen Templates

Wir erstellen eine neue Seite mit einem Classic-Report. Als Basis dient das bereits erwähnte select * from emp. Diesem Report weisen wir in den Report Attributes, das neu erstellte Klapp-Report-Template zu.

Einbinden des eigenen JavaScript-Codes

Wir müssen noch dafür sorgen, dass auch etwas passiert, wenn man auf eine Zeile klickt. Dafür benötigen wir eine Stelle an der unser JavaScript-Code für jQuery interpretiert werden kann. Hierfür gibt es mehrere Möglichkeiten. Entweder die globale Lösung mit der Manipulation des verwendeten Page-Templates in APEX und dem Hinzufügen der JavaScript-Deklaration im HTML-Head der Seite. Oder man kann den JavaScript-Code auch in einem beliebigen HTML-Bereich der Seite ausgeben lassen. Hier bietet sich der JavaScript-Bereich der APEX-Seite an.

$(document).ready(function() {
    $('tr[name*="tr"]').click(function()  {
        $(this).next().children().children().toggle();
    });
});

Die Document-Ready-Funktion von jQuery sorgt dafür, dass der JavaScript-Code tatsächlich erst ausgeführt wird, wenn das Dokument vollständig geladen ist. Mit dem Selektor $('tr[name*="tr"]') wählen wir alle <tr> aus, die in Ihrem Namen den Begriff tr enthalten haben. Diesen Zeilen weisen wir dann den Click-Event zu.

Sobald auf eine Zeile geklickt wurde, wird ausgehend von der angeklickten Zeile (this) das nächste Element (next) der selben Ebene (<tr>) und darin der Enkel selektiert. Das Kind vom <tr> ist der <td>. Und das Kind des <td> ist der <div>. Dieses <div> wird mit der Funktion toggle ein- oder ausgeblendet.

Ziel erreicht? Nein – jetzt ist man natürlich erst auf den Geschmack gekommen. :)

Zusätzliche Funktionen

Wäre es nicht schön, wenn der Anwender einen Hinweis auf die „Klickbarkeit“ des Reports erhalten würde?

$('#report_R1310112176148033').css('cursor','pointer');

Hier muss der Name des Reports angepasst werden. Die Raute (#) bezieht sich, wie in der CSS-Nomenklatur üblich, auf die ID des Reports.

Wie wäre es mit einem zeilenweiten Mouse-Over-Hover-Effekt?

$('tr[name*="tr"]').hover(
  function() {
   $(this).children().css('background-color', '#444444')
  },
  function() {
   $(this).children().css('background-color', '')
  }
);

Wieder selektieren wir alle <tr>, die den Begriff tr im Namen haben und lassen dort die Funktion hover ausführen, die dann dem jeweiligen Kind (<td>) eine andere Hintergrundfarbe verpasst.

Auf diese Art und Weise sind noch viele andere Dinge möglich. Ich wünsche Ihnen viele benutzerfreundliche APEX-Anwendungen. :)

Das Thema jQuery bietet weitaus mehr als in diesem Beitrag angeschnitten wurde. Weitere Informationen zu diesem interessanten Thema erhalten Sie in unseren Opens internal link in current windowAPEX-Schulungen oder sprechen Sie mit unseren Opens internal link in current windowConsulting-Mitarbeitern.

Jede Menge Know-how für Sie!

In unserer Know-How Datenbank finden Sie mehr als 300 ausführliche Beiträge zu den Oracle-Themen wie DBA, SQL, PL/SQL, APEX und vielem mehr.
Hier erhalten Sie Antworten auf Ihre Fragen.