Beiträge

JavaScript in Quick Picks in Oracle APEX

Wer diesen Blog schon öfter besucht hat, wird das Feature der Quick Picks bereits kennen. Diese dienen dazu, Usereingaben zu optimieren, indem mittels eines Klicks auf ein entsprechendes Quick Pick direkt ein Wert in ein Feld eingetragen wird.

 Quickpicks_dynamic_01

Ein Nachteil der Quick Picks ist aber, dass standardmäßig nur vorgefertigte (sprich beim Rendern der Seite bereits definierte) Werte eingesetzt werden können. Auch im letzten Blogeintrag über Quick Picks, in dem wir die Anzahl der Quick Picks dynamisch variierbar gemacht haben, haben wir dieses Problem.
Würde man mit den Quick Picks nun beispielsweise immer den aktuellen Wert eines anderen Feldes übernehmen wollen, so ist dies nicht einfach so möglich.
Angenommen es wäre zum Beispiel gewünscht, den Wert des Feldes „Betrag“ (in der oben angeführten Abbildung) mittels eines Klicks auf einen Quick Pick in das Feld „Betrag bezahlt“ zu übernehmen.
Mit den bisher bekannten Methoden kann man zwar das Feld als Quick Pick angeben (siehe folgende Abbildung), allerdings wurde der zu setzende Betrag bereits beim Rendern der Seite erstellt. War dieser davor „1234“ und wurde nachträglich vom Endbenutzer auf „12345678“ geändert, so wäre auch der Quick Pick immer noch mit dem Wert „1234“ definiert und zwar solange, bis die Region (oder die gesamte Seite) erneut geladen werden.

Quickpick_Eigenschaften_marked

Wie Leser des letzten Beitrages über Quick Picks bereits wissen, arbeiten diese selbst mit JavaScript-Code. Es ist also möglich, beim Erstellen eigener Quick Picks beliebigen JavaScript-Code auszuführen. Anstatt also einen Quick Pick zu generieren, der mittels JavaScript ein Item mit einem vordefinierten Wert befüllt, kann dieser Code auch direkt den Wert zum aktuellen Zeitpunkt aus einem anderen Item auslesen.
Der HTML-Code für das entsprechende Quick Pick würde in diesem Beispiel also wie folgt aussehen:

<span class="apex-quick-picks"><a href="javascript:$s('#CURRENT_ITEM_NAME#',$v('P1_BETRAG'), 'JS-QP')">JS-QP</a></span>

„$s“ ist die in Oracle APEX verwendete JavaScript-Methode zum setzten von Items, während „$v“ die Methode zum Auslesen eines Wertes eines beliebigen Items verwendet werden kann. In diesem Beispiel wird also der Wert aus Item „P1_BETRAG“ in das Item „#CURRENT_ITEM_NAME#“ gesetzt.
„#CURRENT_ITEM_NAME#“ ist nur ein Platzhalter für das gewünschte Item. Wenn dieser HTML-Code nun im Post-Text eines gewünschten Items eingetragen wird (in diesem Fall im Item „P1_BETRAG_BEZAHLT“), wird dieser durch den korrekten Itemnamen ersetzt.
Quickpicks advanced

Um das Layout der Quick Picks korrekt darzustellen muss noch im selben Eigenschaftsfenster im Bereich „Quick Picks“ das Flag „Show Quick Picks“ auf „Yes“ gesetzt werden.

Nun wird der entsprechende HTML-Code mittels CSS in die bekannte Formatierung und Positionierung gebracht. Bei Klick auf den Quick Pick wird immer der aktuelle Wert des Feldes „Betrag“ übernommen, ganz egal, wann dieser geändert wurde.

Dynamic Quick Picks

Um die Quick Picks nun wieder dynamischer zu erstellen, kann man natürlich auf „Shortcuts“ in den Shared Components“ zurückgreifen und die Quick Picks über PL/SQL dynamisch erstellen.

Oracle APEX

Wenn man einen neuen Shortcut erstellt muss als Type „PL/SQL Function Body“ ausgewählt und im Feld „Shortcut“ ein entsprechender PL/SL-Code geschrieben werden.

declare
  v_qp varchar2(32767);
begin
  v_qp := apex_string.format(q'{%1}', 'P1_BETRAG', 'JS-QP');
  return apex_string.format('%0', v_qp);
end;

Create Shortcut

Danach muss der Name des Shortcuts noch im Eigenschaftsfenster des gewünschten Items unter „Post Text“ mittels Anführungszeichen angegeben werden, um APEX mitzuteilen, dass hier der aus dem Shortcut generierte HTML-Code ausgegeben werden soll.

Advanced Post

Man erhält dasselbe gewünschte Ergebnis, es ist aber bei der Umsetzung mit Shortcuts möglich, beliebig viele Quick Picks mit unterschiedlicher Funktion zu erstellen, ohne ständig das Item anpassen zu müssen.

Dynamic Quick Picks

Generell ist es so nun möglich, jeden erdenklichen JavaScript-Code in Quick Picks zu verpacken, es muss nicht einmal eine Quick Pick-Funktionalität dahinterstehen.

JavaScript für APEX Entwickler

JavaScript für APEX Entwickler

JavaScript ist längst nicht mehr nur ein „nice-to-have“ in Oracle APEX. Spätestens seit Dynamic Actions, Cascading LOVs, Plugins und Mobilen Applikationen ist es ein essentieller Bestandteil jeder Oracle APEX Applikation. Das kann ganz einfach geprüft werden, indem im Browser JavaScript deaktiviert wird. Der Effekt ist sofort sichtbar – Seiten laden nicht und Buttons funktionieren nicht mehr.

Am 14. Februar 2014 fand bei DBConcepts in Rahmen der AOUG „Technisches Frühstück“ eine Veranstaltung mit dem Thema „Javascript für APEX Entwickler – Gewappnet für Dynamic Actions und Plugins“ statt, bei der unser Oracle APEX Spezialist Christoph Hillinger aus dem Nähkästchen plauderte.

Wie bei einem Hausbau wurde beim technischen Frühstück JavaScript als Basis definiert, das Fundament und die Grundmauern. Da JavaScript allen Teilnehmern bekannt war, ging der Vortrag mit einer detaillierten Info zu JQuery los. JQuery ist eine der größten und weit verbreitetsten JavaScript Bibliotheken. JQuery dient primär dem traversieren des HTML-Contents, dem Finden und Veränderung von Elementen und deren Attributen sowie der Event-Verwaltung und Effekt-Erzeugung. Sie wird auch in APEX als Grundlage verwendet.

Live Demos

Es folgten einige live Demonstrationen in JFiddle.net für verschiedene JQuery Funktionalitäten.

Nach JQuery wurden die APEX JavaScript Bibliothek genauer betrachtet.

Diese beinhaltet grundsätzlich JQuery, erweitern es aber um komfortable Zusatzfunktionen und APEX-spezifische Funktionen. Ein Blick in die API macht erfahrenen APEX-Entwicklern sofort klar, dass hier auch die standardisierten Dynamic Actions wie „Set Value“, „Enable“ und „Disable“, „Show“ und „Hide“ definiert sind. Dazu kommen noch einige weiter Funktionen für die Aufrufsteuerung von Seiten sowie globalen Prozesse und Plugins.

Es folgten weitere Demos wie JavaScript ganz grundsätzlich abseits von Plugins eingesetzt werden kann.
Diese Demos sind in der Demo-Applikation (http://apex.oracle.com/pls/apex/f?p=45071) zu finden:

  • Scrollable Reports: Oft ist es unpraktisch das ganze Fenster scrollen zu müssen weil ein Report zu breit ist, da damit jedes Mal ein Teil des Menüs aus dem Bild verschwindet – besser wäre es nur den Report zu scrollen – und dabei über einen Scrollbalken oben und unten zu verfügen.
  • Hide/Show Regions: Das hört sich simpel an ist aber auf mehrere Arten möglich – die Demo Lösung wurde auf leichte Erweiterbarkeit ausgerichtet.
  • Big Text in Reports: Manchmal enthalten Reports sehr lange Texte. Diese können die Zeilen sehr stark in die Höhe ziehen – was den Report unübersichtlich und die Navigation mühsam macht. Dem wird Abhilfe geschaffen, indem die Spalte bei der Abfrage in eine entsprechende Struktur gepackt werden und dann je Zeile mittels Link ein- und ausblendbar ist.

Dynamic Actions

Es folgte eine kurze Demo der bekannten vorgefertigtenDynamic Actions. Auch diese Funktionalität ist in der Demo-Applikation zu finden. Dort wurde auch auf die Möglichkeit eingegangen, Aktionen auf unterschiedliche Arten zu setzen. So können Werte mit oder ohne Submit von Items gesetzt werden, was aber in weiterer Folge bei Verweisen auf andere Seiten beachtet werden muss.

Ebenso kann ein Insert in eine Tabelle mittels Submit und Page-Process durchgeführt werden, oder mittels Ajax in einer Dynamic Action. Auch hier hängt die Wahl der Methode von vielen Faktoren ab, wie auch Überlegungen zur Sicherheit.

Plugins

Als nächster Punkt folgten Plugins – wohl eine der wichtigsten Neuerung der letzten APEX Versionen. Sehr wichtig ist, dass Plugins nicht per se gratis sind – sondern die Kosten von der genutzten Lizenz  abhängen und hier immer genau geprüft werden muss, welche Lizenz verwendet wird. Es folgten live Demonstrationen zur Erstellung von einem Item Plugin sowie einem Dynamic Action Plugin.

Zum Abschluss wurde kurz auf Unterschiede zwischen mobiler und Desktop Applikation hingewiesen sowie einige hilfreiche Tools für den Entwicklungsprozess im Allgemeinen vorgestellt.

Die JavaScript für APEX Entwickler Präsentation downloaden >>