Insbesondere bei längeren Berichten wünschen sich viele Endanwender die aus Microsoft Excel bekannte Freeze Panes-Funktion. Auf einen APEX-Bericht übertragen bedeutet dies, dass eine Scrollleiste hinzugefügt wird, mit der man sich durch den Bericht durchscrollen kann (Abbildung 1).

Zu diesem Thema erschien bereits ein Community-Tipp. Damit wird es möglich, die Überschriftszeile zu "fixieren" und die Datenzeilen per Scrollleiste zu verschieben. Vielfach soll (bei sehr breiten Berichten) jedoch auch die erste Spalte des Berichts "fixiert" werden, so dass die anderen Spalten danach horizontal gescrollt werden können. Dieser Tipp zeigt auf, wie man ein Ergebnis wie in Abbildung 2a erreichen kann. Das Ergebnis können Sie sich vorab im Demo-Portal der MT AG ansehen. Im Gegensatz zum einfachen, vertikalen Scrolling wird dieser Tipp allerdings nicht mit den Report-Templates von APEX zusammenarbeiten; es ist ein eigenes nötig. Wie Sie das erstellen können, zeigt dieser Tipp ebenfalls.

Vorbereitungen

Der Tipp basiert auf dem jQuery-Plugin jQuery.FixedTable, welches von der Webseite der Nova Software heruntergeladen werden kann. Zusätzlich wird noch jQuery selbst benötigt - laden Sie die Minified-Version von der jQuery-Webseite herunter (in APEX 4.0 wird jQuery enthalten sein; dann müssen Sie nur noch das Plugin herunterladen). Erzeugen Sie sich dann eine neue Anwendung (wenn Sie noch keine haben), navigieren Sie zu den Gemeinsamen Komponenten, dort zu den Statischen Dateien und laden Sie die beiden Dateien dort hoch (Abbildung 3).

Erstellen Sie nun eine neue Seite und darauf einen Bericht, in dem Sie gerne horizontal und vertikal scrollen möchten; nehmen Sie im Moment noch keine besonderen Einstellungen hinsichtlich der Templates vor. Navigieren Sie dann zum Seiten-Header und binden Sie die heruntergeladenen JavaScript-Bibliotheken wie folgt ein. Ob Sie den Präfix #APP_IMAGES# oder #WORKSPACE_IMAGES# verwenden müssen, hängt wie immer davon ab, ob Sie die Dateien zu einer Anwendung zugeordnet haben oder nicht.

<script type="text/javascript" src="#APP_IMAGES#jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="#APP_IMAGES#jquery.fixedtable.js"></script>

Neues Berichtstemplate erstellen

Nun geht es daran, ein neues Berichtstemplate zu erstellen. Das geschieht in den Gemeinsamen Komponenten im Bereich Templates. Dort finden Sie zunächst eine "Übersicht" über alle verfügbaren Templates Ihrer Anwendung. Mit Klick auf die Schaltfläche Erstellen erzeugen Sie ein neues.

Wählen Sie im nächsten Dialog Bericht bzw. Report aus; schließlich soll ein Berichtstemplate erstellt werden. Erstellen Sie das Template Völlig Neu bzw. from Scratch. Geben Sie Ihrem Template einen Namen und wählen Sie eine der "Klassen" aus dem Theme aus - welche Sie hier nehmen, ist völlig Ihnen überlassen. Wichtig ist nun noch der Template Typ: Hier benötigen Sie ein Generische Spalten (Generic Columns)-Template. Das hat zusätzlich den Vorteil, dass Sie dieses Template auch für andere Berichte nutzen können.

Nach Klick auf die Schaltfläche Erstellen bzw. Create befinden Sie sich wieder in der Template-"Übersicht". Suchen Sie nun das soeben erstellte Template aus (Berichtstemplates sind ziemlich weit unten) und klicken Sie auf den Namen - dann kommen Sie in die Maske, in der Sie das Template bearbeiten können - im Moment ist es noch völlig leer.

In die verschiedenen Textfelder wird nun HTML-Code eingetragen, aus dem APEX dann den Bericht generiert. Für alle wichtigen Bereiche eines Berichts gibt es ein Eingabefeld ...

• Before Rows:
  Hier wird der HTML-Code eingetragen, der einmalig vor den Berichtszeilen generiert werden soll.
• Before Each Row:
  Hier wird der HTML-Code eingetragen, der vor jeder Berichtszeile generiert werden soll.
• ...

Im folgenden erzeugen wir ein sehr einfaches, für die "scrollbare" Tabelle passendes Template - geben Sie sich an dieser Stelle mit dem Styling keine Mühe; das Aussehen des Berichts wird später mit CSS-Klassen gesteuert. Tragen Sie nun den HTML-Code in die Eingabefelder wie folgt ein:

• Before Rows:
  

  <div id="tableDiv_#REGION_ID#" class="tableDiv">
    <table id="table_#REGION_ID#" class="FixedTables">
  

  Hier wird typischerweise eine HTML-Tabelle eröffnet. Sehr wichtig sind die CSS-Klassen ("tableDiv", "FixedTables") - anhand dieser wird der jQuery-Code den Bericht erkennen und die Scrollbalken einfügen; daher müssen sie auf jeden Fall auch mit dem hier dargestellten Inhalt vorhanden sein. Die HTML-Attribute "id" müssen zwar vorhanden sein; die Inhalte können Sie aber frei wählen. Es empfiehlt sich allerdings, die APEX-Regions-ID mit #REGION_ID# einzubauen.
• Before Column Heading:
  

  <thead>
  

• Column Heading Template:
  

  <th #ALIGNMENT#>#COLUMN_HEADER#</th>
  

• After Column Heading:
  Die HTML-Attribute <thead> und <tbody> werden normalerweise häufig ausgelassen - hier ist es jedoch wichtig, sie aufzunehmen; ansonsten funktioniert der JavaScript-Code nicht.

  </thead>
  <tbody>
  

• Before Each Row:
  

  <tr>
  

• Column Template 1:
  

  <td #ALIGNMENT#>#COLUMN_VALUE#</td>
  

• After Each Row:
  

  </tr>
  

• After Rows:
  

  </tbody>
  </table>
  </div>
  #PAGINATION#
  

Wenn Sie fertig sind, speichern Sie das Template ab. Navigieren Sie dann wieder zu Ihrem Bericht und weisen Sie diesem in den Berichtsattributen das neue Template zu (Abbildung 7).

Wenn Sie die Seite anschließend starten, sehen Sie noch nichts besonderes; man erkennt lediglich, dass der Bericht nun das neue Template verwendet (welches wirklich sehr einfach ist).

Das Finale: Den Bericht "scrollbar" machen

Navigieren Sie nun nochmals zu den Seitenattributen und dort zum Seiten-Header. Hier haben Sie vorhin die heruntergelandenen JavaScript-Bibliotheken eingebunden. Fügen Sie dem schon vorhandenen Code noch folgenden hinzu.

    <script type="text/javascript">
        $(document).ready(function() {
            $(".tableDiv").each(function() {
                var Id = $(this).get(0).id;
/*
 * Hier können Sie Höhe und Breite des Berichts ändern; wird er größer,
 * so werden automatisch Scrollleisten eingebaut.
 */
                var maintbheight = 200;
                var maintbwidth = 400;

                $("#" + Id + " .FixedTables").fixedTable({
                    width: maintbwidth,
                    height: maintbheight,
                    fixedColumns: 1,
                    classHeader: "fixedHead",
                    classFooter: "fixedFoot",
                    classColumn: "fixedColumn",
                    fixedColumnWidth: 80,
                    outerId: Id,
                    Contentbackcolor: "#FFFFFF",
                    Contenthovercolor: "#eaeff5",
                    fixedColumnbackcolor:"#FFFFFF",
                    fixedColumnhovercolor:"#eaeff5"
                });
            });
        });
    </script>

<!--
 Die CSS-Angaben können angepasst werden, es gelten die Regeln von HTML / CSS
 -->

    <style type="text/css">
         .fixedColumn .fixedTable td
        {
            color: #000000;
            background-color: #FFFFFF;
            font-size: 12px;
            font-weight: normal;
        }
        
        .fixedHead td, .fixedFoot td
        {
            color: #000000;
            background-color: #eaeff5;
            font-size: 12px;
            font-weight: bold;
            padding: 1px;
        }
        .fixedTable td
        {
            font-size: 8.5pt;
            background-color: #FFFFFF;
            padding: 1px;
            text-align: left;
        }
    </style>

Die Größe Ihrer Berichtsregion legen Sie im JavaScript-Code bei den Variablen maintbheight und maintbwidth fest - die Angaben gelten in Pixel. Innerhalb des <style>-Tags können Sie die CSS-Angaben nach Ihren Wünschen anpassen. Speichern Sie dann die Änderungen und starten Sie die Seite neu - der Bericht sollte dann wie in Abbildung 9 aussehen.

Mit den CSS-Angaben können Sie das Aussehen des Berichts beliebig verändern; spielen Sie ruhig ein wenig damit herum. Die APEX Community bedankt sich bei Niels de Bruijn von der MT AG für die Idee und das Ausarbeiten dieses Tipps.

Zurück zur Community-Seite