Benutzer-Werkzeuge

Webseiten-Werkzeuge


prog:apex_modal_page

Oracle Apex 5 - Modale Page auf einer Apex Seite für einen Detail Dialog mit dynamischen Parametern verwenden

Apex 5 - 10.2016Zurü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“


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

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
htmldb_Get ist deprecated ( eigentlich schon seit 5.0 keine gute Lösung gewesen) ! Und ab APEX 19.2 funktioniert das so nicht mehr!

AJAX Call um die Url zu rendern

Über „Processing/AJAX CAllback“ einen Prozess mit dem Namen „PREPARE_URL“ anlegen.

PL/SQL Code:

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;

JavaScript um den Dialog mit Parameter zu öffnen

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>

Diesen JavaScript Code zum Beispiel in den Static JavaScript Bereich der Seite ablegen.


„Dynamic Actions“ für einen „Click“ auf diesem Button anlegen und mit dieser Action unsere JavaScript Funktion aufrufen

 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

 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

Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
"Autor: Gunther Pipperr"
prog/apex_modal_page.txt · Zuletzt geändert: 2019/11/11 13:01 von Gunther Pippèrr