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.
Pingback: Create a popup tree selection in Oracle Apex | Notes by jmarre