Seitenelemente und Javascript: Mehr als $s und $v ...

Nahezu jede APEX-Anwendung enthält mehr oder weniger Javascript Code. Vor allem Formulare lassen sich mit Hilfe von Dynamic Actions und Javascript Code wesentlich nutzerfreundlicher gestalten. Wenn es darum geht, Formularelemente mit Javascript zu verändern oder zu steuern, kennen viele APEX-Entwickler die seit Jahren vorhandenen Javascript-Funktionen $s, $v und $x. Mit $s setzt man den Wert eines Formularelements, mit $v liest man ihn aus und $x stellt fest, ob ein APEX-Element mit dem übergebenen Namen überhaupt auf der Seite existiert.

Diese Funktionen existieren schon sehr lange in Application Express - und sie sind auch sehr beliebt, zumal die Namen so schön kurz und damit schnell getippt sind. Allerdings sind diese Abkürzungen; die eigentlichen Funktionen befinden sich im Javascript Namensraum "apex.item". Und dieser enthält mehr Funktionen, als Sie vielleicht denken.

Vorher sei allerdings die grundsätzliche Empfehlung zu Javascript-Code in APEX-Anwendungen nochmals erwähnt: Wo es möglich ist, sollte deklarativ mit Dynamic Actions gearbeitet und "manueller" Javascript-Code vermieden werden. Geht es also darum, ein Seitenelement zu verstecken oder anzuzeigen, so ist eine Dynamic Action mit Show oder Hide Aktionen meist die bessere Wahl. Nur dort, wo Dynamic Actions nicht möglich oder nicht angemessen sind, sollte eigener Javascript-Code zum Einsatz kommen.

Probieren wir die Funktionen in apex.item nun anhand eines Beispiels aus. Erzeugen Sie ein Formular für die wohlbekannte Tabelle EMP. Sorgen Sie dafür, dass nicht nur einfache Textfelder, sondern auch andere Elementtypen (Auswahllisten, Radiobuttons oder ein Date Picker).

Das Beispielformular: Tabelle EMP

Öffnen Sie nun die Javascript-Entwicklerkonsole in ihrem Browser (typischerweise geht das mit der F12-Taste).

Javascript-Entwicklerkonsole im Browser

Nun können Sie einige Javascript-Funktionen ausprobieren - beispielsweise den Wert eines Elements auslesen:

• $v( "P2_ENAME" )
• apex.item( "P2_ENAME" ).getValue()

Mit Javascript und Formularelementen in der Konsole arbeiten

Besonders interessant ist apex.item bei Elementen mit einer Werteliste (Auswahllisten, Radiobuttons). Mit $v oder getValue() bekommt man bei solchen Elementen den Rückgabewert der Werteliste, was meist ein numerischer Schlüssel ist. Manchmal ist aber der Anzeigewert gefragt - diesen können Sie mit der Funktion displayValueFor() ermitteln.

Anzeigewert anhand der Werteliste eines Elements ermitteln

displayValueFor() funktioniert allerdings nur für solche Elementtypen, bei denen die Werteliste komplett im Browser vorliegt, wie es bei Auswahllisten oder Radiobuttons der Fall ist. Bei einer Popup LOV kann die Funktion dagegen nicht verwendet werden.

Mit setValue() kann der Wert eines Formularelements gesetzt werden. Auch Elemente wie Radiobuttons oder Auswahllisten werden unterstützt - es muss allerdings der Rückgabewert (der Schlüssel) übergeben werden. Wenn Sie es ausprobieren, werden Sie sehen, wie die Auswahlliste bzw. die Radiobuttons sich automatisch ändern.

Bei Popup LOVs liegt die Werteliste, wie schon gesagt, nicht im Browser vor; es ist dem Browser also gar nicht möglich, den Anzeigewert anhand des Schlüssels zu ermitteln. setValue() erlaubt daher das explizite Setzen sowohl des Anzeige- als auch des Rückgabewertes.

Für eine Popup-LOV kann setValue den Rückgabe und den Anzeigewert setzen

Schließlich erlaubt die setValue() Funktion, das "Change"-Ereignis zu unterdrücken. Normalerweise ist der Effekt von setValue() derselbe, als hätte der Endanwender das Element manuell geändert. Liegt also eine Dynamic Action vor, die auf dem Change Event basiert, so wird diese ausgelöst. Setzt man allerdings bei setValue() das letzte Argument (pSuppressChangeEvent) auf true, so wird das Ereignis unterdrückt; Dynamic Actions würden also nicht ausgelöst.

• apex.item( "P2_ENAME" ).setValue( "MUSTERMANN", null, true )

Aber apex.item kann noch mehr. So finden Sie Funktionen für all dies, was Sie auch mit Dynamic Actions machen können (verstecken, anzeigen, aktivieren, deaktivieren oder einen CSS-Style zuweisen).

• Verstecken und Anzeigen
  apex.item( "P2_ENAME" ).hide() und apex.item( "P2_ENAME" ).show()
  
  
  

  Formularelemente verstecken

• Aktivieren und deaktivieren
  apex.item( "P2_ENAME" ).enable() und apex.item( "P2_ENAME" ).disable()
  
  
  

  Formularelemente deaktivieren

Interessant ist die Funktion isChanged(). Unmittelbar nach dem Laden der Seite liefert diese ein false zurück. Wenn der Anwender den Wert im Eingabefeld geändert hat, oder setValue() aufgerufen wurde, wird isChanged() von da an true zurückliefern. Das kann sehr interessant sein, um beispielsweise festzustellen, ob ein AJAX-Request zum Server wirklich nötig ist oder nicht. Wenn isChanged() für alle beteiligten Elemente false zurückliefert, kann man sich AJAX-Requests zum Server sparen ...

Wurde ein Formularelement geändert? isChanged() beantwortet diese Frage

Mit setStyle() kann schließlich ein CSS-Style zugewiesen werden. Das ist insbesondere interessant, um ein Element in bestimmten Situationen hervorzuheben. Die CSS-Eigenschaften selbst werden als Javascript-Objekt (JSON-Style) übergeben.

Das Formularelement mit CSS-Styles hervorheben

Spielen Sie ruhig ein wenig mit diesen und den anderen Funktionen im Namensraum apex.item herum. Sie sind hervorragendes Handwerkszeug, um Ihre Formulare nutzerfreundlicher und interaktiver zu gestalten. Achten Sie aber immer darauf, dass deklarative Dynamic Actions stets vorzuziehen sind; wann immer Sie ein Problem also deklarativ lösen können, sollten Sie es tun. Ist jedoch ein größerer Block an Funktionalität auf einmal auszuführen (on Page Load) oder sind Dynamic Actions aus anderen Gründen gerade nicht passend, so steht der Nutzung von apex.item nichts im Wege.

zurück zur Community-Seite