Eine Popup-Tree-Auswahl mit Oracle Apex erstellen

Anforderung

• Eine platzsparende Tree-Auswahl in einem Oracle Apex-Report oder einer Oracle Apex Form. Die Tree-Auswahl soll erst bei Bedarf geöffnet werden.
• Dabei soll die gesamte Funktionalität von dem Standard Apex-Tree erhalten bleiben. Insbesondere soll es möglich durch den Tree zu navigieren.
• Der ausgewählte Wert soll immer eingeblendet werden.

Die Recherche nach einem Apex-Plugin für Trees brachte einige Anregungen aber nicht das gewünschte Ergebnis. Hier stelle ich ein Beispiel vor, wie man die Anforderungen größtenteils mit den Bordmitteln von Oracle Apex implementieren kann

• über eine Tree-Region
• die als Modal-Fenster angezeigt wird
• Ein Display-Item zeigt, den aktuell ausgewählten Tree-Anzeigewert an und triggert das Modal-Fenster
• Ein Hidden-Item enthält den aktuell ausgewählten internen Tree-Wert
• Eine Dynamic Action für Clicks auf die Tree-Elemente (durch einen JQuery selector), setzt den internen und den angezeigten Tree-Wert neu und schließt das Modal-Fenster.

 

Demo

https://apex.oracle.com/pls/apex/f?p=DEMO_JENS_MARRE:TREE_POPUP

(Anmelden mit Username „demo“ / Passwort „demo“)

 

Hier sind die Schritte für den Apex Builder im Detail:

• Eine Apex HTML-Region anlegen: „Choose from tree“
• Ein Text Item „Display Only“ für den ausgewählten Tree-Anzeigewert anlegen
  • Name: P1_SELECTED_EMP_NAME
  • Type: Display Only
  • Default: „(Choose)“
• Ein Hidden-Item anlegen, um den ausgewählten internen Tree-Wert zu hinterlegen
  • Name: P1_SELECTED_EMP_ID
  • not protected
• Eine Apex Computation anlegen, um den angezeigten aus dem internen Tree-Wert eingangs zu ermitteln.
  • For item: P1_SELECTED_EMP_NAME
  • Type: SQL Query

SELECT ENAME

FROM EMP

WHERE EMPNO = to_number(:P1_SELECTED_EMP_ID);

• Eine Apex Tree-Subregion von „Choose from tree“ anlegen
  • Type: „Tree“
  • Name: „Employees“
  • Region Template: „Modal Region“
  • Parent Region: „Choose from tree“
  • Static ID: „treeRegion“ (diese wird benötigt, um das Apex Modal-Fenster zu öffnen und zu schließen)
  • Tree Template: (what you like)
  • Table: EMP
  • ID EMPNO
  • *Parent ID : MGR
  • *Node Text : ENAME
  • *Start With MGR
  • *Start Tree: Value is Null
  • Order Sibling By: ENAME
  • Selected Node Page Item: P1_SELECTED_EMP_ID
• Einen Triggerlink auf P1_SELECTED_EMP_NAME mit einer Apex Dynamic Action mittels JQuery wrappen. Eine Apex Dynamic Action „on Page load“ anlegen
  • Name: WRAP_OPEN_MODAL_TRIGGER
  • True Action: Execute Java Script Code

  $(„#P1_SELECTED_EMP_NAME“).css({„color“: „#3467a9″,“text-decoration“: „underline“}).wrap(„<a id=’modalTrigger‘></a>“);

  $(„#modalTrigger“).attr(„href“,“#“).click( function() {

  openModal(„treeRegion“);

  });

• Eine Apex Dynamic Action anlegen, als JQuery-Selector für Clicks auf Tree-Elemente
  • Name: SELECT_FROM_TREE
  • Event: Click
  • Selection Type: jQuery Selector
  • jQuery Selector: div.tree li > a
  • True – Action:
  • Action: Execute JavaScript Code
  • Fire on Page Load: no
  • Code:

  var selectedId = $(this.triggeringElement).parents(„li:first“).attr(„id“);

  var selectedName = $(this.triggeringElement).text();

  $(„#P1_SELECTED_EMP_NAME“).text(selectedName);

  closeModal(„treeModal“);

  $s(„P1_SELECTED_EMP_ID“, selectedId);

 

Ich verwende hier die „$s“-Funktion, anstatt der JQuery-Funktion „$“, damit der vollständige Funktionsumfang des Oracle Apex JS-Frameworks erhalten bleibt: z.B. um onchange Dynamic Actions auf  P1_SELECTED_EMP_ID zu triggern.