Schnellauswahlen (Quick Picks) gibt es bereits seit den Anfängen von Application Express. Im Application Builder werden Schnellauswahlen recht intensiv genutzt - Abbildung 1 zeigt ein Beispiel.

Abbildung 1: Schnellauswahlen im Application Builder

Ein Klick auf die Schnellauswahl - und der Eintrag wird in der Auswahlliste sofort angewählt. Schnellauswahlen können auch in eigenen Anwendungen genutzt werden: Bei den Eigenschaften zu jedem Formularelement gibt es den Abschnitt Schnellauswahlen oder Quick Picks. Vom Endanwender häufiger gebrauchte Einträge eignen sich sehr gut zur Aufnahme in die Schnellauswahlen. Abbildung 2 zeigt, wie die Schnellauswahl konfiguriert wird.

Abbildung 2: Schnellauswahlen im für eigene Formularelemente nutzen

Allerdings zeigen sich hier auch schon die Schwächen - denn die Schnellauswahlen werden stets als statische Einträge konfiguriert.

• Bei Änderungen muss stets der APEX-Entwickler aktiv werden
• Einträge können nicht wiederverwendet werden
• Als Trennzeichen wird stets ein Komma verwendet - das kann nicht beeinflusst werden
• Dynamisch generierte oder gar berechnete Einträge sind nur auf dem Umweg über ausgeblendete APEX Elemente möglich

Vom Konzept her sind Schnellauswahlen recht ähnlich zu Auswahllisten - und damit ergeben sich schnell analoge Anforderungen. Der wesentliche Unterschied ist der, dass Schnellauswahlen nur wenige, "populäre" Einträge beinhalten. Folgerichtig sollte die Anzahl der Einträge überschaubar bleiben; ansonsten liegt es aber sehr nahe, für die Inhalte der Schnellauswahl, analog zur Auswahlliste, eine Werteliste (LOV) als Basis zu nehmen.

Dynamische Schnellauswahlen: Lösungsansatz

Dieser Tipp stellt ein APEX-Plugin vor, welches dynamische Schnellauswahlen, also Schnellauswahlen auf Basis einer Werteliste oder SQL-Abfrage, ermöglicht. Das Plugin hat zwei Aufgaben: Zunächst müssen die Einträge für die Schnellauswahlen abgerufen werden ...

• Anhand des Namens kann die SQL-Abfrage einer dynamischen Werteliste aus der APEX-Dictionary View APEX_APPLICATION_LOVS entnommen werden (Spalte LIST_OF_VALUES_QUERY).
• Bei statischen Wertelisten gibt es keine SQL-Abfrage; Einträge finden sich in der View APEX_APPLICATION_LOV_ENTRIES. Mit Hilfe der Spalten RETURN_VALUE, DISPLAY_VALUE und DISPLAY_SEQUENCE lässt sich das SQL aber recht einfach zusammenstellen.
• Als dritte Variante bleibt natürlich noch das Bereitstellen einer eigenen SQL-Abfrage durch den Anwendungsentwickler.

... danach werden aus den Einträgen Schnellauswahlen, also HTML-Links, generiert in die APEX-Anwendungsseite unterhalb des Eingabefeldes eingebaut. Hierzu schauen wir den HTML-Code einer Anwendungsseite mit einem APEX-Element, welches eine Schnellauswahl enthält, etwas genauer an (Abbildung 3).

Abbildung 3: Von APEX generierter HTML-Code für die Schnellauswahl

Eine Schnellauswahl ist also ein einfacher HTML-Link, welcher mit Hilfe der in APEX eingebauten JavaScript-Funktion $s den Inhalt eines Formularelements setzt. Weiter geschieht nichts.

Die Daten, welche die SQL-Abfrage zurückliefert, müssten auf ähnliche Art und Weise in das HTML der Anwendungsseite eingebaut werden. Am einfachsten geht das mit Hilfe von JavaScript, nachdem die Seite in den Browser geladen wurde. Abbildung 4 zeigt beispielhaft, wie einfach man mit Hilfe eines jQuery-Selektors ($("#P2_EMPNO")) und der Funktion .after() zusätzlichen HTML-Text unterhalb eines Elements einbauen kann.

Abbildung 4: HTML-Text mit jQuery unterhalb eines Formularelements platzieren

Es spricht alles dafür, diese Funktionalität als APEX-Plugin bereitzustellen: Es gibt bestimmte Eingabeparameter wie LOV-Name, SQL-Abfrage oder betroffenes Element und die Arbeit ist stets die gleiche. Die SQL-Abfrage muss ausgeführt, die Ergebnisse abgerufen und dann per jQuery unterhalb des Elements platziert werden. Da die Funktionalität möglichst für alle APEX-Elemente bereitstehen sollte, kommt ein Item-Plugin nicht in Frage - ein Dynamic Action Plugin dürfte am besten geeignet sein.

Das APEX Plugin "Dynamic Quick Picks"

Laden Sie das Plugin von der Seite apex-plugin.com herunter, navigieren Sie zu den Gemeinsamen Komponenten, dort zu den Plugins und spielen Sie es über die Schaltfläche Importieren in Ihre Anwendung ein.

Abbildung 5: Das Plugin wurde in die Anwendung importiert

Navigieren Sie danach zu Ihrer Formularseite und dann zur Baumansicht der Seitenattribute. Erzeugen Sie eine neue Dynamic Action, indem Sie links unten die rechte Maustaste auf Dynamic Actions betätigen und dann auf Erstellen (Create) klicken. Im ersten Dialog geben Sie der neuen Dynamic Action einen Namen (bspw. Quick Picks laden).

Legen Sie dann das Ereignis fest - hier geht es darum, die Schnellauswahlen initial beim Seitenaufbau zu laden: Legen Sie also Page Load als Ereignis fest (Abbildung 6). Eine Bedingung brauchen Sie nicht.

Abbildung 6: Die Dynamic Action soll "beim Laden der Seite" ausgelöst werden

Danach legen Sie die konkrete Aktion fest, die beim Laden der Seite erfolgen soll. In der Auswahliste Action finden Sie nun einen Eintrag für das neue Plugin: Item Quick Picks from LOV.

Abbildung 7: Das neue Plugin Item Quick Picks from LOV wird ausgewählt

Nach der Auswahl des Plugins sollte sich der Settings-Dialog öffnen. Hier können Sie das Plugin konfigurieren.

Abbildung 8: Einstellungen für das neue Plugin

• Wenn Sie eine benannte Werteliste aus den Gemeinsamen Komponenten verwenden möchten, geben Sie im ersten Feld LOV Name deren Namen an. Wenn Sie eine SQL-Abfrage verwenden möchten, lassen Sie dieses Feld leer.
• Wenn Sie eine SQL-Abfrage angeben möchten, tragen Sie diese ins zweite Feld LOV Custom SQL ein. Wie bei einer normalen Werteliste muss die SQL-Abfrage zwei Spalten zurückgeben - die erste wird zur Anzeige, die zweite zur Rückgabe verwendet.
• Danach legen Sie fest, wie viele Einträge maximal gezeigt werden sollen. Nehmen Sie hier nicht zu viele - weniger ist mehr.
• Als Separator geben Sie an, wie die einzelnen Einträge voneinander getrennt werden sollen; ein Komma ist hier ebenso denkbar, wie ein Bindestrich oder Leerzeichen.
• Mit der Angabe einer CSS-Klasse können Sie die Quick Picks formatieren. Dabei sollte die vom Plugin generierte HTML-Struktur im Auge behalten werden.

  <div class="{css-class}">
    <a href="{quickpick-action}">{quickpick-display}</a>
    {quickpick-separator}
    <a href="...
    :
  </div>
  

  Die angegebene CSS-Klasse wird also auf den die Quickpicks umgebenden DIV-Container angewendet. Mit entsprechenden CSS-Direktiven lassen sich dann aber durchaus auch die Links der Einträge selbst formatieren.

  .css_for_quickpicks {padding: 2px;}
  .css_for_quickpicks a {font-weight: bold; color: ...}
  

• Die Link Attributes werden unverändert in das HTML-Tag <a> eingebaut.
• Page Items To Submit funktioniert genauso wie bei allen anderen APEX-Komponenten; wenn Ihre SQL-Abfrage ein APEX-Element verwendet, sollten Sie es hier angeben, damit die Quick Picks immer korrekt zurückgeliefert werden.

Zum Abschluß fehlt nur noch das Element, unterhalb dessen die neuen Schnellauswahlen angezeigt werden sollen. Wählen Sie Item als Selection Type aus (etwas anderes geht auch nicht) und wählen Sie dann das Element aus. Sie können auch mehrere Elemente auswählen; das Plugin unterstützt das (Abbildung 9).

Abbildung 9: Ziel-Element für die Schnellauswahlen bestimmen

Erstellen Sie danach die Dynamic Action mit Klick auf die Schaltfläche Create Dynamic Action. Starten Sie die Seite danach neu - unterhalb des Formularfeldes für JOB finden Sie nun die neuen Schnellauswahlen.

Abbildung 10: Das Ergebnis: Schnellauswahlen auf Basis einer SQL-Abfrage

Wenn Sie die gleiche dynamische Aktion nicht auf das Ereignis Page Load, sondern auf die Änderung eines anderen Elements (onChange) anlegen, können diese Quick Picks sogar dynamisch werden.

• Download Plugin "Dynamic Quick Picks":
  http://www.apex-plugin.com/oracle-apex-plugins/dynamic-action-plugin/dynamic-quick-picks_231.html
• Demo-Seite auf "apex.oracle.com":
  http://apex.oracle.com/pls/apex/f?p=34491:200

Zurück zur Community-Seite