WaitPopup im Einsatz

02.
Juli
2020
Veröffentlicht von: Martina Meiszies

In der Entwicklung von APEX-Anwendungen werden oft nur Test-Daten verwendet, ein Bericht baut sich damit schnell auf. In einer Produktionsumgebung kann es z. B. durch die Anzahl der Datensätze jedoch oftmals länger dauern, bis ein Bericht geladen ist und es gibt auch Prozesse, die längere Zeit benötigen. In dieser Zeit kann der Anwender andere Schaltflächen betätigen und damit unbewusst neue Sessions aufbauen. Schnell ist es dann passiert, dass sich die Sessions in der Datenbank summieren.
Dieser Artikel zeigt kleine Beispiele, wie man den Benutzer davon abhalten kann, während des Aufbaus des Berichtes oder langlaufender Prozesse andere Elemente zu klicken und den Benutzer wissen zu lassen, dass etwas passiert.

Dazu gibt es folgende APEX-Funktion:

apex.widget.waitPopup(pContent)

null

Diese Funktion zeigt eine Warte-Animation an. Sie besteht aus einem Overlay, einem HTML Div Element, das den Benutzer davon abhält, auf irgendeinen Teil der Seite zu klicken, und einer visuellen "Spinner"-Animation irgendeiner Art. Sie hindert den Benutzer nicht daran, die Seite über die Tastatur zu bearbeiten.

Um das Popup zu schließen, verwendet man die Funktion "remove" des zurückgegebenen Objekts. Diese Funktion wird allerdings selten benötigt, da sie automatisch in apex.page.submit basierend auf der Option showWait aufgerufen wird. Auch benötigen Ajax-Operationen normalerweise kein Overlay, um das Klicken zu deaktivieren.

Der Parameter pContent ist optional.

 Name  Typ  Beschreibung
 pContent   String 

 HTML-Code für einen Warteindikator. Wenn das nicht vorhanden ist, wird der standardmäßige
CSS-Animationswarteindikator Spinner angezeigt.

 

Es gibt auch noch die Funktion apex.util.showSpinner(pContainer, pOptions).

Diese Funktion zeigt auch einen Spinner an, die dem Benutzer eine Verarbeitung darstellt. Aber bei Verwendung dieser Funktion kann man während der Anzeige des Spinners andere Element bedienen, welches in den folgenden Beispielen nicht gewollt ist.

Beispiele:

Beispiel 1 – Long Running Report

Über eine Schaltfläche (Button) wird ein Element gesetzt und damit ein Bericht aktiviert, dessen Abfrage aber aufgrund von sehr vielen Datensätzen sehr lange dauert, bis er angezeigt wird.

Die Schaltfläche benutzt die Aktion „Zu Seite in dieser Anwendung umleiten“ (Redirect to Page in this Application) beim Klick-Event und das Ziel ist dieselbe Seite, auf der gearbeitet wird. Im Link Builder-Ziel wird ein Element gesetzt, der im Bericht für die „Serverseitige Bedingung“ genutzt wird und davon abhängig wird der Bericht angezeigt.

Eine dynamische Aktion an der Schaltfläche führt folgenden JavaScript-Code aus:

null

null

  • apex.widget.waitPopup();

null

Der Spinner wird ohne ein „remove“ beendet, sobald alle Datensätze für den Bericht zur Verfügung stehen. Man kann in der Wartezeit keine anderen Elemente bedienen.

Beispiel 2 – Long Running Report

Ein Bericht wird abhängig von einer Auswahlliste (Select List) angezeigt.

Die Seitenaktion bei Auswahl ist „Redirect and Set Value“.

Eine dynamische Aktion beim Ereignis „Ändern“ führt den JavaScript-Code apex.widget.waitPopup();  aus.

Der Bericht wird durch die Serverseitige Bedingung abhängig von der Auswahlliste angezeigt. Da er zum Anzeigen der Daten lange Zeit benötigt, wird der Spinner angezeigt und der Benutzer kann während des Wartens keine anderen Elemente benutzen.

null

null

  • apex.widget.waitPopup();

null

Der Spinner wird ohne ein „remove“ beendet, sobald alle Datensätze für den Bericht zur Verfügung stehen.

Beispiel 3 – Long Running Ajax Process

Über eine Schaltfläche wird ein langlaufender Prozess aufgerufen:

Die Aktion zur Schaltfläche ist eine dynamische Aktion und wird vom Klick-Event aktiviert.

null

Folgender Code wird ausgeführt:

null

Der Ajax Callback „PerformedProcess“ ist z.B. vom Typ PL/SQL-Code und verarbeitet oder berechnet Daten in einem langen Prozess. (Zum Simulieren habe ich in meinem Beispiel einfach DBMS_SESSION.SLEEP verwendet.)

null

null

Beim Ausführen ist es nicht möglich, andere Elemente der Seite zu bedienen:

null

Hier ist es allerdings wichtig, popup.remove() auszuführen, um den Spinner wieder auszublenden!

Links:

https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/apex.widget.html#.waitPopup

https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/apex.util.html#.showSpinner

Jede Menge Know-how für Sie!

In unserer Know-How Datenbank finden Sie mehr als 300 ausführliche Beiträge zu den Oracle-Themen wie DBA, SQL, PL/SQL, APEX und vielem mehr.
Hier erhalten Sie Antworten auf Ihre Fragen.