Benutzer-Werkzeuge

Webseiten-Werkzeuge


prog:apex_modal_region

Oracle Apex 5.0 - Modale Region auf einer Apex Seite für einen Detail Dialog verwenden

Apex 5 - 10.2016Zurück zur Übersicht Apex 5

Aufgabe: Über das „Anklicken“ eines Names in einem „Classic Report“ soll die Detail Informationen dazu in einem modalen Fenster in der gleichen Seite angezeigt werden.

Nur 5.0! Artikel veraltet!

Für die Umsetzung wird eine eigene Region in der gleichen Apex Seite angelegt, in dieser Region dient ein „Classic Report“ dazu, die Detail Informationen darzustellen.

Alternativ kann das auch über eine eigene Page erfolgen, ich finde es aber übersichtlicher wenn alles beieinander in einer Page angelegt wird, zumal wenn es sich nur um so eine einfache Anzeige ohne große Logik handelt.

Die notwendigen Elemente:

  • Seite mit dem gewünschten Bericht in einer eigenen Region auf die Basis Tabelle erstellen
  • Region vom Typ „Static Content“ für die JavaScript Funktion und ein „hidden“ Page Item für die Bind Variable anlegen
  • Region mit dem Detail Report anlegen und im SQL auf das zuvor angelegte Page Item Element referenzieren
  • Link im Basis Bericht über eine „HTML Expression“ hinterlegen, über diesen Link wird dann später die Detail Region als modales Fenster in der Seite öffnet
  • Ajax Callback Prozess anlegen, um das Page Item in Session State von Apex auch auf dem Server zu setzen
  • JavaScript Funktion anlegen die das Page Item in der Session dann auch setzt, das Fenster öffnet und den Detail Bericht jedes mal frisch ausführt, zusätzlich wird der Titel Header des Fensters gesetzt

Normalen Bricht erstellen

Eine Apex Seite mit einem „Classic Report“ wie gewohnt erstellen.


Region vom Typ "Static Content" für die JavaScript Funktion und das Hidden Page Item anlegen

Region anlegen vom Typ „Static Content“, Template je nach Geschmack einstellen, z.b. ohne „Decoration“ um wenig Platz zu verbrauchen.

Hier hinterlegen wir später die JavaScript Funktion unter „Source/Text“.

Ein Page Item mit einem Namen, wie in unseren Fall „P73_DBUSERNAME“, anlegen und auf den Typ „Hidden“ setzen.

In dieser Variable speichern wir später mit JavaScript den angeklickten Wert und übergeben damit den Wert in die SQL Abfrage des Detail Fensters.

Allerdings müssen wir dazu NICHT den Wert auf der angezeigten HTML Seite ändern, sondern den Wert des Page Item im Session State auf dem Server!

Das heißt es ist nicht ausreichend nur einfach mit JQuery den Elementwert zu setzen, wir müssen auch mit PL/SQL auf Server Seite den Session State der Seite anpassen!


Region mit dem Detail Report anlegen

Region mit dem Detail Report vom Type „Classic Report“ anlegen anlegen.

SQL mit einer Bindvariablen hinterlegen:

SELECT username 
    ,  os_username
    ,  userhost
    ,  terminal
    ,  to_char(extended_timestamp,'dd.mm.yyyy hh24:mi') AS logdate
    ,  Action_name
    ,  Comment_text
    ,  PRIV_USED
  FROM v_page_73_auditlog_details 
 WHERE username=:P73_DBUSERNAME 
 ORDER BY extended_timestamp DESC;

Der Region über „Advanced/Static ID“ eine Static ID zuweisen wie „USER_DETAIL_DIALOG“

Auf diese ID referenzieren wir später in JavaScript um das Fenster zu öffnen.


Über eine „Column Formatting/HTML Expression“ auf einer Spalte des Basis Berichtes den Link hinterlegen.

Auf einer Spalte des Basis Berichtes den Link hinterlegen

Code:

<a onclick="openDetail('#USERNAME#')" href="#" style="text-decoration: underline"> #USERNAME# </a>

Ajax Callback Prozess anlegen

Über „Processing/AJAX Callback“ eine AJAX Callback mit dem Namen „SET_SESSION_ITEM“ anlegen

Create Apex Process SET_SESSION_ITEM AJAX Callback

Code:

DECLARE
 v_value VARCHAR2(2000); 
 
BEGIN
 
  v_value:=apex_application.g_x01;
 
  APEX_UTIL.SET_SESSION_STATE('P73_DBUSERNAME',v_value);
 
  v_value:=APEX_UTIL.GET_SESSION_STATE('P73_DBUSERNAME');    
 
  htp.p(v_value);
 
END;

Hier zum Debug auch den gesetzten Wert zurück geben


JavaScript Funktion anlegen

Das Fenster wird per JavaScript geöffnet.

Region ID unseres Modalen Fensters überprüfen/ermitteln

Die Titel Region ID „#ui-id-1.ui-dialog-title“ über die Developer Tools des Browsers ermitteln:  Komplette ID ermitteln wie #ui-id-1.ui-dialog-title

JavaScript anlegen

Zuvor muss aber im Session State der Seite das Page Item für die Abfrage in diesem Fenster auf Page Ebene gesetzt werden. Dazu haben wir uns ja zuvor den AJAX Call erzeugt.

function openDetail(username) {
 
     // setzen des Page Item auf der Seiten
     // das wirkt sich aber NICHT auf den Session State aus 
     // damit kann das Item NICHT im Classic Report der Region genützt werden
     // dient nur zur Debug Zwecken  bzw. um hier den Wert zwischen zu speichern   
     $s('P73_DBUSERNAME',username);
 
    // alternativ ohne den AJAX Prozess zu definieren auf direkt APEX_UTIL verwenden
    //apex.server.process ( 'SAVE_P73_VAL_SESS_STATE', {
    //                     x01:       'set_session_state',
    //                     pageItems: '#P73_DBUSERNAME'
    //                   }, {dataType: 'text'} );
 
   // Unseren zuvor definierte AJAX Processing Routine aufrufen
   ajaxRequest = new htmldb_Get(null, $v("pFlowId"), "APPLICATION_PROCESS=SET_SESSION_ITEM", $v("pFlowStepId"));
 
   // dabei den Wert des Page Items übergeben
   ajaxRequest.addParam("x01",$v('P73_DBUSERNAME')); 
   // Aufrufen   
   returnVal = ajaxRequest.get();
 
   //Debug 
   //alert(returnVal);
 
   // Das Fenster öffnen
   // über die Static ID! Daher auch zuvor setzen!!
   openModal('USER_DETAIL_DIALOG');
 
   // Titel des Fenster mit JQuery setzen
   // zuvor mit dem Developer Tools des Browsers die richtige ID der Region ermitteln!   
   $('#ui-id-1.ui-dialog-title').text('User detail for the user '+ $v('P73_DBUSERNAME'));
 
   // Damit nicht der Wert vom letzten Aufruf wieder anzeigt wird
   // den Bericht mit der neu gesetzten Bind Variable neu anzeigen lassen!
   $('#USER_DETAIL_DIALOG').trigger('apexrefresh');
 
}

Dieser JavaScript Block wird auf der Page in „JavaScript/Function and Global Variable Declaration“ hinterlegt.


Quellen

Diese Website verwendet Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer zu. Außerdem bestätigen Sie, dass Sie unsere Datenschutzbestimmungen gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website.Weitere Information
"Autor: Gunther Pipperr"
prog/apex_modal_region.txt · Zuletzt geändert: 2019/03/21 14:12 von gpipperr