Benutzer-Werkzeuge

Webseiten-Werkzeuge


prog:apex_modal_region

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
prog:apex_modal_region [2016/10/17 09:29] – [JavaScript Funktion anlegen] gpipperrprog:apex_modal_region [2019/03/21 14:12] (aktuell) – [Oracle Apex 5 - Modale Region auf einer Apex Seite für einen Detail Dialog verwenden] gpipperr
Zeile 1: Zeile 1:
 +=====Oracle Apex 5.0 - Modale Region auf einer Apex Seite für einen Detail Dialog verwenden=====
 +
 +**Apex 5 - 10.2016** => [[prog:oracle_apex|Zurü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.
 +
 +<note warning>Nur 5.0! Artikel veraltet!</note>
 +
 +
 +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:
 +<code sql>
 +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;
 +</code> 
 +
 +
 +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.
 +
 +----
 +
 +===Link im Basis Bericht===
 +
 +Über eine "Column Formatting/HTML Expression" auf einer Spalte des Basis Berichtes den Link hinterlegen.
 +
 +{{ :prog:apex:apex_modal_region_set_link_v01.png?800 |Auf einer Spalte des Basis Berichtes den Link hinterlegen}}
 +
 +Code:
 +<code html>
 +<a onclick="openDetail('#USERNAME#')" href="#" style="text-decoration: underline"> #USERNAME# </a>
 +</code>
 +
 +
 +----
 +
 +
 +===Ajax Callback Prozess anlegen===
 +
 +Über "Processing/AJAX Callback" eine AJAX Callback mit dem Namen "SET_SESSION_ITEM" anlegen
 +
 +{{ :prog:apex:apex_modal_region_set_ajax_call_v01.png?600 |Create Apex Process SET_SESSION_ITEM AJAX Callback}}
 +
 +
 +Code:
 +<code plsql>
 +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;
 +</code> 
 +
 +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:
 +{{ :prog:apex:apex_modal_region_getid_v01.png | 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.
 +
 +<code javascript>
 +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');
 +
 +}
 +
 +</code>
 +
 +
 +Dieser JavaScript Block wird auf der Page in  "JavaScript/Function and Global Variable Declaration" hinterlegt.
 +
 +
 +----
 +
 +==== Quellen ====
 +
 +
 +JavaScript Tips:
 +
 +  * http://www.grassroots-oracle.com/2013/11/use-jquery-to-dynamically-modify-region.html
 +  * https://community.oracle.com/thread/2300021
 +  * https://docs.oracle.com/database/121/AEAPI/javascript_api.htm#AEAPI29529
 +
 +
 +APEX_UTIL
 +
 +  *  https://docs.oracle.com/cd/E14373_01/apirefs.32/e13369/apex_util.htm#AEAPI182
  
prog/apex_modal_region.txt · Zuletzt geändert: 2019/03/21 14:12 von gpipperr