Gunther Oracle APEX und Datenbank Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
prog:apex_modal_page

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
prog:apex_modal_page [2019/11/11 13:01] – [JavaScript um den Dialog mit Parameter zu öffnen] gpipperrprog:apex_modal_page [2020/01/28 10:04] (aktuell) – [Oracle Apex 5 - Modale Page auf einer Apex Seite für einen Detail Dialog mit dynamischen Parametern verwenden] gpipperr
Zeile 1: Zeile 1:
 +=====Oracle Apex 5 - Modale Page auf einer Apex Seite für einen Detail Dialog mit dynamischen Parametern verwenden=====
 +
 +**Apex 5 - 10.2016** => [[prog:oracle_apex|Zurück zur Übersicht Apex 5]]
 +
 +
 +**Aufgabe:** 
 +
 +Über einen Button soll eine Modale Page auf der Seite anzeigt werden, auf dieser neuen Seite kann der Anwender dann weitere Schritte durchführen. Zusätzlich muss beim Öffnen der neuen Page aber auch ein dynamischer Parameter übergeben werden.
 +
 +
 +Um Parameter zwischen den Seiten weiterzugeben, kann natürlich auch über den Session State gearbeitet werden. 
 +
 +D.h. das Page ITEM wird im von der „Mutter“ Seite in den Session State geschrieben und kann dann von der „Kind“ Seite via AJAX Call wieder gesetzt werden. 
 +
 +In diesem Beispiel wird der Parameter aber über die URL übergeben, d.h. über die Seite und nicht über den Session State.
 +
 +Damit wird die Verwendung von globalen Variablen vermieden und damit bei der Entwicklung der Code "sauberer"
 +
 +
 +Plugin für das Problem => https://www.ostrowskibartosz.pl/2019/12/open-modal-page-using-pretius-apex-context-menu/
 +
 +----
 +
 +=== Einfache Lösung ohne dynamische Parameter ===
 +
 +Ohne die Übergaben eines dynamischen Parameters ist das Öffnen einer Modalen Page bereits komplett im Page Designer ohne großen Aufwand möglich
 +
 +Es wird einfach auf eine Page vom Page Mode "Modal Dialog" verwiesen und dabei können Page Items als Parameter übergeben werden.
 +
 +Einfach einen Button in einer Region anlegen und diesen Button zum Aufruf des Modalen Fensters verwenden
 +
 +{{ :prog:apex:apex_modal_page_call_via_button_v1.png |Oracle APEX Aufruf des Modalen Fensters über Button}}
 +
 +
 +Leider können dann aber diese Parameter dann NICHT mehr während der Laufzeit der Seite geändert werden!
 +
 +
 +Soll also das modale neue Fenster auf zuvor vom Anwender geänderte Parameter reagieren, lassen sich diese dynamischen Parameter nicht so einfach während der Laufzeit übergeben!
 +
 +
 +----
 +
 +
 +==== Übergabe von dynamischen Parameter an "Modal Dialog" Pages mit Java Script ====
 +
 +Leider reicht es nicht aus, per Java Script eine URL zusammenzustellen und mit "javascript:apex.navigation.dialog bzw apex.navigation.dialog(url, {title:'Parameter Handling',height:'800',width:'750',maxWidth:'960',modal:true,dialog:null}, 't-Dialog--standard', $('#ID_MEINER_REGION')) " aufzurufen. 
 +
 +
 +In der Apex URL ist die Checksum der HTTP GET Parameter hinterlegt, stimmt diese nicht, wird der Aufruf einer solchen URL von Apex verweigert.
 +
 +Um aber die Checksum zu berechnen, ist ein PL/SQL Aufruf notwendig, das lässt sich wiederum über ein Processing mit einem AJAX Callback durchführen.
 +
 +
 +Notwendige Elemente:
 +
 +  * AJAX Callback um die Url zu rendern
 +  * JavaScipt Funktion um den Dialog zu öffnen
 +  * Button mit Link auf die JavaScript Funktion
 +
 +
 +
 +<note warning> htmldb_Get ist deprecated ( eigentlich schon seit 5.0 keine gute Lösung gewesen)  ! Und ab APEX 19.2 funktioniert das so nicht mehr! </note>
 +
 +
 +----
 +
 +===AJAX Call um die Url zu rendern===
 +
 +Über "Processing/AJAX CAllback" einen Prozess mit dem Namen "PREPARE_URL" anlegen.
 +
 +PL/SQL Code:
 +
 +<code plsql>
 +declare
 + v_url varchar2(2000); 
 +begin
 +
 +  v_url:=apex_application.g_x01;
 +      
 +  begin
 +     v_url:=apex_util.prepare_url(p_url => v_url, p_checksum_type => 'SESSION');
 +  exception
 +    when others then
 +     v_url:=SQLERRM;
 +  end;
 +  
 +  htp.prn(v_url);
 +
 +end;
 +</code>
 +
 +
 +----
 +
 +=== JavaScript um den Dialog mit Parameter zu öffnen===
 +
 +<code javascript>
 +
 +function openParameterDialog(message) {  
 +
 +   // URL bzw. kompletten JavaScript Block erzeugen
 +   var url     = getDialogUrl(message) ;   
 +   
 +   // DAs Fenster über das Ausführen der URL öffnen
 +   // in den call back verlagert, da nun asyncron
 +   //apex.navigation.redirect(url);
 +     
 +}  
 +  
 +function getDialogUrl(message) {  
 +   
 +   var url='';
 +   var url_template='f?p=500:25:##SESSIONID##::NO:RP:P25_MESSAGE,P25_SUBMIT_TYPE,P25_LOG_ID,P25_VALID_FROM:##P25_MESSAGE##,##P25_SUBMIT_TYPE##,##P25_LOG_ID##,##P20_VALID_FROM##'; 
 + 
 +   // Parameter in die URL einfügen
 +   url= url_template.replace('##SESSIONID##' ,  $v('pInstance'));  
 +   url= url.replace('##P25_MESSAGE##', message);  
 +   url= url.replace('##P25_SUBMIT_TYPE##', 'BACKUP_OLD_VAL_P');  
 +   url= url.replace('##P25_LOG_ID##', '-1');  
 +   url= url.replace('##P20_VALID_FROM##', $v('P20_VALID_FROM'));  
 +   
 +   // URL Checksum bzw. den gesamten JavaScript Ausdruck dazu erzeugen
 +   
 +   // AJAX Request vorbereiten
 +   // schlechte Idee das zu verwenden
 +   //var ajaxRequest = new htmldb_Get(null, $v("pFlowId"), "APPLICATION_PROCESS=PREPARE_URL", $v("pFlowStepId"));
 +   // URL als Parameter übergeben
 +   //ajaxRequest.addParam("x01",url); 
 +   // AJAX Call ausführen  
 +   //url = ajaxRequest.get();
 +
 +   // hier nun so angepasst, ist zwar keine gute Lösung aber so funktioniert der Code wieder
 +
 +  apex.server.process(
 +    'PREPARE_URL',                             // Process or AJAX Callback name
 +    {x01: url },  // Parameter "x01"
 +    {
 +      success: function (pData) {             // Success Javascript
 +        apex.item("P320_DIALOG_URL").setValue(pData);
 +        apex.navigation.redirect(pData);  
 +      },
 +      dataType: "text"                        // Response type (here: plain text)
 +    }
 +   );
 +   
 +
 +   return url;
 +   
 +}  
 +
 +
 +</script>
 +</code>
 +
 +Diesen JavaScript Code zum Beispiel in den Static JavaScript Bereich der Seite ablegen.
 +
 +
 +----
 +
 +
 +===Button mit Link auf die JavaScript Funktion===
 +
 +"Dynamic Actions" für einen "Click" auf diesem Button anlegen und mit dieser Action unsere JavaScript Funktion aufrufen
 +
 +
 +{{ :prog:apex:apex_modal_page_call_via_dynamic_action.png | Modal Dialog Page mit Dynamic Action öffnen}}
 +
 +
 +
 +----
 +
 +===Aufrufende Seite refeschen/neu Laden nach dem Schließen des Dialogs===
 +
 +Da wir ja den Modalen Dialog über JavaScript selber aufgerufen haben, können wir nicht mit der eingebauten Dynamic Aktion arbeiten.
 +
 +Der Event hängt eben nicht am Button, der Button selber ist nicht intern mit dem Modalen Dialog verknüpft.
 +
 +
 +Um auf jeden Dialog Close Event auf der Seite zu reagieren, können wir aber unsere Event Handler auf die Seite selber hängen.
 +
 +Dazu eine "Custom Dynamic Action" auf der "Eltern" Seite anlegen, die auf den Dialog Close reagiert.
 +
 +
 +Eltern Seite :
 +
 +**Custom Dynamic Action**
 +
 +When:
 +
 +Event: **Custom**
 +
 +Custom Event: **dialogclose**
 +
 +Selection Type: **JavaScript Expression**
 +
 +JavaScript Expression: **document**
 +
 +{{ :prog:apex:apex_refresh_page_after_dialog_close.png | Oracle APEX refresh Page after Dialog close }}
 +
 +
 +True und False Action entsprechend anlegen.
 +
 +
 +siehe auch =>https://ruepprich.wordpress.com/2016/10/11/apex-5-da-when-cancelling-modal-dialog/
 +
 +
 +
 +----
 +
 +
 +
 +
 +==== Quellen ====
 +
 +
 +URL Checksum Problem:
 +  * http://stackoverflow.com/questions/32226847/which-substitution-string-use-for-checksum-in-oracle-apex5
 +  * http://www.explorer-development.uk.com/modal-dialog-tips-and-tricks/
 +  * https://community.oracle.com/thread/3958029
 +
 +
 +APEX UTIL Package
 +
 +  * http://docs.oracle.com/database/121/AEAPI/apex_util.htm#AEAPI159
 +
 +
 +
 +
  
prog/apex_modal_page.txt · Zuletzt geändert: 2020/01/28 10:04 von gpipperr