LOV-Basierte, dynamische Formular-Schnellauswahlen (Quick Picks)
Erscheinungsmonat |
APEX-Version |
Datenbankversion |
November 2012 |
ab 4.2 |
ab 10.2 |
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.
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.
- 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.
Zurück zur Community-Seite
|