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:
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.
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
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.
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.
$(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.
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 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
