prog:apex_modal_page
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
prog:apex_modal_page [2019/06/26 13:18] – [Aufrufende Seite refeschen/neu Laden nach dem Schließen des Dialogs] gpipperr | prog: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: | ||
+ | |||
+ | |||
+ | **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, | ||
+ | |||
+ | 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 " | ||
+ | |||
+ | |||
+ | Plugin für das Problem => https:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | === 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" | ||
+ | |||
+ | Einfach einen Button in einer Region anlegen und diesen Button zum Aufruf des Modalen Fensters verwenden | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | |||
+ | 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" | ||
+ | |||
+ | Leider reicht es nicht aus, per Java Script eine URL zusammenzustellen und mit " | ||
+ | |||
+ | |||
+ | 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) | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ===AJAX Call um die Url zu rendern=== | ||
+ | |||
+ | Über " | ||
+ | |||
+ | PL/SQL Code: | ||
+ | |||
+ | <code plsql> | ||
+ | declare | ||
+ | v_url varchar2(2000); | ||
+ | begin | ||
+ | |||
+ | v_url: | ||
+ | | ||
+ | begin | ||
+ | | ||
+ | exception | ||
+ | when others then | ||
+ | | ||
+ | end; | ||
+ | | ||
+ | htp.prn(v_url); | ||
+ | |||
+ | end; | ||
+ | </ | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | === 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 | ||
+ | // | ||
+ | |||
+ | } | ||
+ | | ||
+ | function getDialogUrl(message) { | ||
+ | |||
+ | var url=''; | ||
+ | var url_template=' | ||
+ | |||
+ | // Parameter in die URL einfügen | ||
+ | url= url_template.replace('## | ||
+ | url= url.replace('## | ||
+ | url= url.replace('## | ||
+ | url= url.replace('## | ||
+ | url= url.replace('## | ||
+ | |||
+ | // URL Checksum bzw. den gesamten JavaScript Ausdruck dazu erzeugen | ||
+ | |||
+ | // AJAX Request vorbereiten | ||
+ | // schlechte Idee das zu verwenden | ||
+ | //var ajaxRequest = new htmldb_Get(null, | ||
+ | // URL als Parameter übergeben | ||
+ | // | ||
+ | // 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( | ||
+ | ' | ||
+ | {x01: url }, // Parameter " | ||
+ | { | ||
+ | success: function (pData) { // Success Javascript | ||
+ | apex.item(" | ||
+ | apex.navigation.redirect(pData); | ||
+ | }, | ||
+ | dataType: " | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | |||
+ | | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Diesen JavaScript Code zum Beispiel in den Static JavaScript Bereich der Seite ablegen. | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | ===Button mit Link auf die JavaScript Funktion=== | ||
+ | |||
+ | " | ||
+ | |||
+ | |||
+ | {{ : | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ===Aufrufende Seite refeschen/ | ||
+ | |||
+ | 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 " | ||
+ | |||
+ | |||
+ | Eltern Seite : | ||
+ | |||
+ | **Custom Dynamic Action** | ||
+ | |||
+ | When: | ||
+ | |||
+ | Event: **Custom** | ||
+ | |||
+ | Custom Event: **dialogclose** | ||
+ | |||
+ | Selection Type: **JavaScript Expression** | ||
+ | |||
+ | JavaScript Expression: **document** | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | |||
+ | True und False Action entsprechend anlegen. | ||
+ | |||
+ | |||
+ | siehe auch => | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ==== Quellen ==== | ||
+ | |||
+ | |||
+ | URL Checksum Problem: | ||
+ | * http:// | ||
+ | * http:// | ||
+ | * https:// | ||
+ | |||
+ | |||
+ | APEX UTIL Package | ||
+ | |||
+ | * http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
prog/apex_modal_page.txt · Zuletzt geändert: 2020/01/28 10:04 von gpipperr