Tabular Form, Dynamic Action und Neue Zeile

Von Tobias Arnhold 2.13.2015
Einige von euch haben bestimmt schon die ein oder andere jQuery Codezeile in einem Tabular Form verwendet.
Das Ganze funktioniert recht zuverlässig solange der Button "Neue Zeile" nicht verwendet wird. In diesem Beitrag geht es darum, auch auf neue Zeilen reagieren zu können.

Angenommen ich habe in meinem Tabular Form eine Spalte mit einem Textfeld und will den Wert nach dem ändern in eine andere Spalten im Tabular Form übernehmen.
Dazu muss zunächst in der Spalte von "Textfeld1" eine fiktive CSS Klasse hinterlegt werden.
Column Attributes > Element CSS Classes > tf_textfeld1

Normalerweise würden Sie nun eine Dynamic Action anlegen, die bei Veränderung (Change) auf die Klasse "tf_textfeld1" reagiert.
Im folgenden JavaScript Code übertragen Sie anschließend den Wert in das neue Feld:
$(this.triggeringElement).parent().parent().find('input[name=f02]').val($(this.triggeringElement).val());
Was passiert in dem Code Schnipsel?
Davon ausgehend das wir vom "Textfeld1" aus starten, wird über die parent() Funktion die nächst höhere Instanz aufgerufen.
Nach zwei Ebenen sind wir auf der TR-Ebene (Zeile). Nun suchen wir in dieser nach dem "Textfeld2" hinterlegt mit dem Namen "f02_xxxx". Der vordere Teil definiert die Spalte und der hintere Teil des Names verkörpert die Zeilennummer. Über die val() Funktion übergeben wir nun noch den Wert des Quell-Elements in das Zielelement.
Wie anfänglich erwähnt funktioniert diese Lösung nur solange Sie keine neuen Zeilen hinzufügen. Auch der Event Scope "Dynamic" löst dieses Problem bei meiner Anwendung NICHT. Obwohl dieser eigentlich genau das machen sollte.

Des Rätsels Lösung ist die Verwendung einer Funktion in Kombination mit einer Dynamic Action:
Gehen Sie dazu in die Page Defintion und hinterlegen Sie eine JS-Funktion.
function tfChangeEvent() {
  $('.tf_textfeld1').on('change', function() {
    $(this).parent().parent().find('input[name=f02]').val($(this).val());
  });
}
Nun noch zwei Schritte bis zum Ziel:
1. Button: Dieser muss so konfiguriert werden, dass er durch eine Dynamic Action startet.

2. Dynamic Action: Diese muss nun die Funktionalität des "Neue Zeile" Button adaptieren und anschließend unsere Funktion aufrufen.
Code 1: apex.widget.tabular.addRow();
Code 2: tfChangeEvent();
Info: Fire On Page Load bei Code 2 nicht vergessen

Das wärs. Jetzt können Sie beliebig komplexe Szenarien entwickeln. Mit und ohne "Neue Zeile"! :)

Ps: Ich selbst habe es nicht mit einem Texfeld sondern mit einem PopUp LOV umgesetzt. Von daher könnte es sein, das der Change Event eher SubOptimal ist und ein LoseFocus besser geeignet wäre. 

Update 14.02.2015
Nach den Kommentaren von Peter, habe ich eine Beispielanwendung unter APEX 5 erstellt und mal nach getestet. Da funktioniert das anfänglich beschriebene Beispiel mit Hilfe von Event Scope "Dynamic" auf Anhieb. Warum es in meiner APEX 4.2.5 Anwendung nicht funktioniert, werde ich später noch einmal testen. Es muss wohl am alten Template bzw. an alten jQuery Erweiterungen liegen.
Den Link zur Anwendung findet ihr hier: https://apexea.oracle.com/pls/apex/f?p=11617

Post Tags:

8 Comments " Tabular Form, Dynamic Action und Neue Zeile "

Peter Raganitsch 13 February, 2015 08:58

Hallo Tobias,

Ich denke, dass das unnötig kompliziert gelöst ist. Mit einer Dynamic Action mit Event Scope "Dynamic" funktioniert das auch wunderbar für neue Zeilen.

Zu deinem jQuery Selector sei anzumerken, dass dieser abhängig von angezeigten Spalten und gewähltem Template ist. Demzufolge muss dieser bei Änderungen der Query oder des Templates ggf. angepasst werden.

Tobias Arnhold 13 February, 2015 09:05

Hallo Peter,

komisch den Trick mit "Dynamic" habe ich erfolglos als aller Erstes probiert. Die APEX Version war 4.2.5. Kann es sein, dass es mit speziellen Template Optionen zusammenhängt? In meinem Beispiel habe ich mit einem recht alten Template gearbeitet.

Peter Raganitsch 13 February, 2015 10:43

Sollte meiner Meinung nach nicht mit dem Template zusammen hängen, da der Unterschied zwischen Static und Dynamic nur ein anderer Funktionsaufruf von jQuery ist. Wenn das eine funktioniert, dann sollte das andere ebenso funktionieren.

Tobias Arnhold 13 February, 2015 12:55

In dem Falle kann ich nur sagen, in meinem Fall funktioniert es so nicht. Habe verschiedenste Varianten geprüft und keine hat angeschlagen. Ich werde es bei Gelegenheit mal mit einem aktuellem Template in einer Beispielanwendung nachstellen.

Tobias Arnhold 14 February, 2015 19:58

Hi Peter,
ich habe es mal unter APEX 5 versucht und da klappt es mit Hilfe von Dynamic sofort. Imho: Ich muss meine Seite noch mal auf Unregelmäßigkeiten prüfen.

Juergen Schuster 16 February, 2015 09:31

Ist trotzdem ein gutes Beispiel, wie man prinzipiell an solche Themen herangehen kann, wenn man sich in eine Funktionalität mit reinhängen möchte, einfnach eine DA, die zunächst die Orginalfunktion ausführt, danach bin ich dran.

Juergen Schuster 16 February, 2015 09:33

Ist trotzdem ein gutes Beispiel, wie man prinzipiell an solche Themen herangehen kann, wenn man sich in eine Funktionalität mit reinhängen möchte, einfnach eine DA, die zunächst die Orginalfunktion ausführt, danach bin ich dran.

Juergen Schuster 16 February, 2015 09:33

Ist trotzdem ein gutes Beispiel, wie man prinzipiell an solche Themen herangehen kann, wenn man sich in eine Funktionalität mit reinhängen möchte, einfnach eine DA, die zunächst die Orginalfunktion ausführt, danach bin ich dran.