Startseite > Allgemein > Eine Popup-Tree-Auswahl mit Oracle Apex erstellen

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.

 

 

Kategorien:Allgemein
  1. Es gibt noch keine Kommentare.
  1. August 3, 2014 um 9:27 pm

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: