Auswahl  

 

Oracle
APEX
APEX 18.1:APEX 5.1:12.1, 12.2
Dynamic Actions, Javascript, APEX
26.07.18
MP
31.08.18
MP

Body

Ich habe schon oft versucht Dynamic Actions Vorlagen für APEX im Internet zu finden. Aber es gibt nur sehr wenige und viele sind nicht für den Anwendungsfall passend oder zu kompliziert. Ziel dieses Artikels ist es, einfache Dynamic Action in Oracle APEX als Vorlagen für den täglichen Hausgebrauch zur Verfügung zu stellen.

Fangen wir an...

1.Ein Item soll nach der Eingabe, sofort wieder mit dem Session State synchronisiert werden.
Das bedeutet der Inhalt des Items wird sofort wieder mit der Datenbank, Tabelle wwv_flow_data synchronisiert. Das hat den Vorteil, von einem anderen Item wieder auf den Inhalt des Items über die Notation :Px_ITEM zugreifen zu können.
Voraussetzungen. Ein Text Item (P1_TEXT) existiert in einer Region.

Dynamic Action erstellen:
 Rechte Maus auf P1_TEXT / Create Dynamic Action
 Name: Submit_Val (oder egal)
 Event: On Change
 Selection Type: Item
 Item(s): P1_TEXT
 
 Als True Bedingung:
 Identification
  Action: Execute PL/SQL Code
   PL/SQL Code:
    NULL;
  Items to Submit: P1_TEXT

Fertig. Sobald Sie das Item ändern und verlassen, steht es sofort im Session State zur Verfügung.
 
2. Ein Zweites Item soll erst dann auf der Seite erscheinen, wenn das erste Item mit Inhalt gefüllt wurde:
Wir brauchen dazu ein zweites Textfeld (P1_NAME).

Rechte Maus auf P1_TEXT / Create Dynamic Action
 Name: Show_Name (oder egal)
 WHEN
  Event: On Change
  Selection Type: Item
  Item(s): P1_TEXT
  Client-side Condition
    Type: Item is not null
    Item: P1_TEXT
 
 Als True Bedingung:
  Identification
  Action: Show
  Affected Elements
    Selection Type: Item(s)
    Item(s): P1_NAME
  Execution Options:
    Fire ony Initialization: NO
 Neue False Bedingung: Rechte Maus auf False / Create False Action oder
 auf Show / Create Opposite False Action
 Action: Hide
 Affected Elements
    Selection Type: Item(s)
    Item(s): P1_NAME
 Execution Options:
    Fire on Initialization: YES


Wenn man es noch schöner haben möchte legt man eine weitere True Bedingung fest,
 die den Cursor in das nächste/richtige Item setzt.

  Action: Set Focus
  Affected Elements
    Selection Type: Item(s)
    Item(s): P1_NAME
  Execution Options:
    Fire ony Initialization: NO 

3. Sie geben im ersten Item eine Mitarbeiternummer ein und bekommen in einem anderen
Item den Namen des dazugehörigen Mitarbeiters zurück:

Name: Setze_Name (oder egal)
  WHEN
   Event: On Change
   Selection Type: Item
   Item(s): P1_TEXT
 Client-side Condition
    Type: Item is not null
    Item: P1_TEXT
    
Als True Bedingung:
 Identification
  Action: Set Value
  Set Type: SQL Statement
  SQL Statement: SELECT ename FROM emp WHERE empno=to_number(:P1_TEXT);
  Items to Submit: P1_TEXT
 
 Affected Elements
    Selection Type: Item(s)
    Item(s): P1_NAME
 Execution Options:
    Fire ony Initialization: NO

   
4. Beim Klick in eine Textbox, sollen in zwei andere Textboxen neue Werte (mit/ohne Datenbankbezug) eingetragen werden.
Wir brauchen dazu die Textboxen P1_TEXT, P1_NAME und P1_GEHALT

Name: Setze_Werte (oder egal)
 WHEN
  Event: On Click
  Selection Type: Item
  Item(s): P1_TEXT
 
 Als True Bedingung:
 Identification
  Action: Execute PL/SQL Code
  Settings
    PL/SQL Code: /*ohne Datenbank-Bezug */
     :P1_NAME:='MARCO';
   :P1_GEHALT:=9999;
    Items to Return: P1_NAME,P1_GEHALT
    PL/SQL Code: /*mit Datenbank-Bezug */
     SELECT ename,sal
   INTO :P1_NAME,:P1_GEHALT
   FROM emp
   WHERE empno=:P1_EMPNO;
    Items to Return: P1_NAME,P1_GEHALT
    Items to Submit: P1_EMPNO

 

5. Modales Fenster gibt Wert an Hauptfenster zurück:
Wir brauchen dazu eine normale Seite (Seite 1)    
mit einer Textbox (P1_TEXT)
und einem Button (Modal_Fenster)

Ausserdem eine Modale Seite (Seite 2) mit einer Selectliste (P2_EMPS)
und einem Button (Zurueck)

Der Button Modal_Fenster macht einen Redirect auf Seite 2
Auf den Button legen wir eine Dynamic Action

Name: Close_Dialog (oder egal)
 WHEN
  Event: Dialog Closed
  Selection Type: Button
  Button: Modal_Fenster
 
 True Action:
  Identification
    Action: Set Value
  Settings:    
    Set Type: Dialog Return Item
    Return Item: P2_EMPS
  Affected Elements
    Selection Type: Items
    Item(s): P1_TEXT
    
Auf der Modalen Seite:
Die Select Liste hat folgende Query: select ename,empno from emp;
Und der Zurueck Button     verwendet als Action: Redirect to URL
Target: javascript:apex.navigation.dialog.close(true, {'P2_EMPS': '&P2_EMPS!JS.'});


6. Bei einem Doppelklick auf die Textbox P1_ENAME soll der Inhalt dieser Textbox
sofort in die Datenbank zurückgeschrieben werden.

Wir brauchen dazu eine Normale Seite mit zwei Items:
P1_EMPNO vom Typ Hidden
P1_ENAME vom Typ Text Field

Name: Update_table (oder egal)
 WHEN
  Event: Double Click
  Selection Type: Item
  Item(s): P1_ENAME
 
 True Action:
  Identification
  Action: Execute PL/SQL Code
 Settings
 PL/SQL Code:
  UPDATE emp SET ename=:P1_ENAME
  WHERE empno=:P1_EMPNO;
  COMMIT;

 Items to Submit: P1_ENAME


7. Textbox Eingabe in Großbuchstaben umwandeln:
 In der Textbox eintragen unter
Advanced / Custom Attributes: style='text-transform:uppercase'
 
 Trotzdem muss das Item auch nach dem Verlassen in Großbuchstaben gewandelt werden!
 

 Name: TO_UPPER (oder egal)
 WHEN
  Event: Change
  Selection Type: Item
  Item(s): P1_ENAME
 
 True Action:
  Identification
   Action: Execute Javascript Code
  Code
   $x('P1_ENAME').value=$x('P1_ENAME').value.toUpperCase();
  Affected Elements
   Selection Type: Items
   Item(s): P1_TEXT


8. Beim Klick auf ein Button sollen zwei Textfelder geleert werden:
Wir brauchen dazu:
Button ("Clear")
Text Feld P1_NAME und P1_TEXT

Gehen Sie mit der rechten Maus auf den Button / Create Dynamic Action
WHEN
  Event: Clear
  Selection Type: Button
  Button: Clear
 
  True Action:
  Identification
   Action:  Clear
  Affected Elements
   Selection Type: Items
   Item(s): P1_TEXT,P1_TEXT 

 Damit das nun nicht aus Versehen ausgewählt wird, bauen wir eine Sicherheitsabfrage ein
 Dazu muss eine weitere True Action erzeugt werden mit einer niedrigeren Sequenz Nummer (z.B. 5)

 True Action:
  Identification
   Action:  Confirm
  Settings
  Text: Wollen Sie wirklich löschen?
  Fire On Initialization: No


 Zum Schluß noch ein paar praktische Javascript Snippets:
 Abfrage mit YES/NO und dem Text "Mitarbeiter löschen?". Bei YES wird REQUEST = DELETE gesendet
 apex.confirm( "Mitarbeiter löschen?", 'DELETE' );
 
 Abfrage mit YES/NO und dem Text "Mitarbeiter löschen?". Bei YES wird REQUEST = DEL gesendet
 und die Items P1_DEPTNO = 10 und P1_EMPNO=7788 gesetzt.
 apex.confirm( "Mitarbeiter löschen?", {
    request: "DEL",
    set: {
        "P1_DEPTNO": 10,
        "P1_EMPNO": 7788
    }
} );

 Submit ausführen mit REQUEST=GO
 apex.submit( "GO" );

9. In einem Tabular Form soll in einer neu hinzugefügten Zeile in einer Spalte immer bereits ein Defaultwert stehen.

Gehen Sie in die Eigenschaften der gewünschten Spalte (bei uns im Beispiel DEPTNO) in den Bereich Advanced / CSS Classes und tragen dort ein:

mydeptno

Der Defaultwert soll aus einem Item stammen mit Namen :P1_DEPTNO

Legen Sie nun eine Dynamic Action auf den "ADD" Button in der Seite, der bei einem Click reagiert:

Event: Click
Selection Type: Button
Button: ADD
True Action:
Action: Execute Javascript
Code:
apex.widget.tabular.addRow();
$(".mydeptno").last().val($v("P1_DEPTNO"));

10. In einem Autocomplete Item soll ein Wert eingesetzt werden, der dazu führt das eine Select Liste sich eine neue Query ausführt mit dem Autocomplete Wert als Filter.

Legen Sie dazu ein Autocomplete Item (P1_DEPT) und eine Select Liste an (P1_EMPS)

Die Query für P1_DEPT:

select deptno from dept

Die Query für P1_EMPS:

select ename,empno from emp
where deptno=:P1_DEPT

Legen Sie nun eine Dynamic Action auf P1_DEPT:

Event: Loose Focus
Selection Type: Item(s)
Item: P1_DEPT
True Action: Execute PL/SQL Code
PL/SQL Code:  NULL;
Items to Submit: P1_DEPT
 
Zweite True Action:
Event: Refresh
Selectin Type: Item(s)
Items: P1_EMPS