Interaktive Berichte nutzt sicherlich nahezu jeder APEX-Entwickler an der einen oder anderen Stelle in seiner Anwendung. Auch die Oberfläche des APEX Application Builders verwendet inzwischen nahezu überall den interaktiven Bericht. Und hier fällt auch auf, dass ein interaktiver Bericht mehrere Ansichtsvarianten anbietet. Die Abbildungen 1a bis 1c zeigen die verschiedenen Ansichtsvarianten für die Übersicht der "Vorhandenen Anwendungen".

Abbildung 1a: Vorhandene Anwendungen: Standardansicht "Icon View"

Abbildung 1b: Vorhandene Anwendungen: Normale Berichtsansicht

Abbildung 1c: Vorhandene Anwendungen: "Detail View"

Diese Darstellungsvielfalt können Sie auch in Ihren eigenen Anwendungen nutzen. In den Berichtsattributen eines interaktiven Berichts können die Bereiche Symbolansicht und Detailansicht aktiviert und konfiguriert werden. Wie das geht, zeigt dieser Tipp.

Erstellen Sie sich also einen Bericht auf die Tabelle EMP. Wichtig ist, dass das Berichts-SQL alle Daten ermittelt, die für die verschiedenen Darstellungsvarianten nötig sind. So müssen auch die vollständigen URLs der Bilder für die Symbolansicht generiert werden. Ein Beispiel für die Tabelle EMP könnte die folgende SQL-Abfrage sein.

with is_mgr as (
  select distinct e.empno, count(u.empno) as directs 
  from emp e, emp u
  where e.empno = u.mgr 
  group by e.empno
)
select 
  e.empno,
  e.ename,
  e.job,
  e.hiredate,
  e.sal,
  e.comm,
  d.dname,
  d.loc,
  m.ename mgrname,
  e.mgr,
  case 
    when u.empno is null then '/i/htmldb/icons/user_green.gif'
    else                      '/i/htmldb/icons/user_red.gif'
  end as image_src,
  u.directs,
  'f?p='||:APP_ID||':2:'||:APP_SESSION||'::::IREQ_MGR:'||e.empno as link
from emp e, emp m, dept d, is_mgr u
where e.mgr = m.empno (+)
  and d.deptno = e.deptno 
  and u.empno (+) = e.empno 

Wenn Sie sich den interaktiven Bericht dann ansehen, sollte der wie in Abbildung 2 aussehen.

Abbildung 2: Die Ergebnismenge des interaktiven Berichts

Diese Ansicht ist natürlich unbrauchbar - denn einige der Spalten sollen dem Anwender gar nicht gezeigt werden. Navigieren Sie nun also zu den Berichtsattributen und stellen Sie alle Spalten, die Sie in der normalen Berichtsansicht nicht darstellen möchten auf Ausgeblendet (Hidden).

Abbildung 3: Informationen der "Detail View" und die "Icon View" ausblenden

Danach sieht der Bericht schon aufgeräumter aus (Abbildung 4).

Abbildung 4: Der interaktive Bericht ist "aufgeräumt"

Navigieren Sie nun zu den Berichtsattributen und dort in den Bereich Symbolansicht. Gehen Sie dann wie folgt vor:

• Stellen Sie Symbolansicht aktiviert auf Ja.
• Legen Sie LINK als Link-Spalte, IMAGE_SRC als Bildquellenspalte und ENAME als Label-Spalte fest.
• Geben Sie border="0" style="background-color: white" als Bildattribute ein.
• Stellen Sie die 5 (fünf) als Spalten Pro Zeile ein.

Abbildung 5: Symbolansicht konfigurieren

Speichern Sie den Bericht nun ab und starten Sie die Seite. Der interaktive Bericht enthält nun zwei neue Icons, mit denen Sie die Ansicht zwischen der Standard- und der Symbolansicht wechseln können (Abbildung 6).

Abbildung 6: Symbolansicht des Berichts

Im Beispiel wurden Symbole verwendet, die in APEX enthalten sind; die "Manager" in der Tabelle EMP werden rot, die anderen grün visualisiert. Der interaktive Bericht bietet nun, wie Sie erkennen können, zwei Ansichten auf die EMP-Tabelle. Aber damit nicht genug - es gibt noch eine dritte, die Detailansicht (Detail View). Navigieren Sie dazu nochmals zu den Berichtsattributen und dann in den Bereich Detailansicht (Abbildung 7).

Abbildung 7: Detailansicht konfigurieren

Wer schonmal ein Berichtstemplate erstellt hat, dürfte sich hier heimisch fühlen - denn auch hier wird ein Berichts-Template hinterlegt, wenn es hier auch wesentlich einfacher ist. Und wie bei den Templates für klassische Berichte werden die Spalteninhalte mit der "Lattenzaun"-Syntax eingebaut. Dort, wo die Inhalte der Berichtsspalte EMPNO erscheinen sollen, wird #EMPNO# in den HTML-Code aufgenommen.

Lassen Sie die Felder Before Rows und After Rows frei. Das eigentliche Template setzen Sie bei For Each Row ein. Verwenden Sie im Beispiel folgenden Code.

<div class="detview titel pkicon">#EMPNO#</div>
<div class="detview">
 <div><a class="titel" href="#LINK#">#ENAME#</a></div>
 <div>
  <span class="detail">Directs: #DIRECTS#</span><br/>
  <span class="detail">Beschäftigt seit <b>#HIREDATE#</b> als <b>#JOB#</b></span><br/>
  <span class="detail">Abteilung: <b>#DNAME#</b> in <b>#LOC#</b> - Manager: <b>#MGRNAME#</b></span><br/>
  <span class="detail sal">Gehalt: #SAL# - Provision: #COMM#</span><br/>
 </div>
</div>
<br/>

Wenn Sie diese Detailansicht nun mal ausprobieren, sollten Sie ein Bild wie in Abbildung 8 erkennen.

Abbildung 8: Die Detailansicht - ein Zwischenergebnis

Die darzustellenden Informationen sind schon alle erkennbar; allerdings lässt die Formatierung ein wenig zu wünschen übrig. Im HTML-Code können Sie erkennen, dass bereits CSS-Klassen wie text, titel oder pkicon verwendet werden - es fehlen nur noch die dazugehörigen CSS-Definitionen - und hier sind sie auch schon.

.detview {
  padding: 2px;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
}

.titel{
 font-size: 14pt;
 font-weight: normal;
}

.detail{
 font-size: 8pt;
}

.sal{
  font-weight: bold;
  color: red;
}

.pkicon {
  border-radius: 4px;
  width: 140px;
  text-align: center;
  background-color: yellow; 
  border: 1px solid black;
}

Navigieren Sie zu den Seitenattributen der Seite mit den interaktiven Bericht und kopieren Sie die CSS-Anweisungen in das Feld Inline im Bereich CSS.

Abbildung 9: Die CSS-Angaben werden in die Seitenattribute aufgenommen

Natürlich können Sie die CSS-Definitionen alternativ auch ins Seitentemplate aufnehmen - dann sind sie auf allen Anwendungsseiten wirksam. Nachdem Sie die Seite neu gestartet haben, sieht die Detailansicht schon besser aus ...

Abbildung 10: Die Detailansicht ist fertig

Nun haben Sie für Ihre eigene SQL-Abfrage eine Standard-, eine Symbol- und eine Detailansicht erstellt. Je nach Anforderung können Sie also mit einem interaktiven Bericht verschiedene Darstellungsvarianten anbieten - und der Aufwand hält sich doch in Grenzen. Probieren Sie es aus!

Zurück zur Community-Seite