In APEX nutzen wir Drag ‘n’ Drop mit iQuery

Mausbewegungen wie Drag’n’Drop sind eine einfache und weit verbreitete Art, einen „Zur Liste hinzufügen“-Befehl auszuführen oder die Funktionalität neu zu ordnen. In APEX kann dies problemlos mit jQueryUI implementiert werden, wie wir bereits bei der „APEX Connect“ in Düsseldorf letzte Woche erklärt haben. Allerdings haben wir nur die Frontend-Implementierung erklärt und nicht erklärt, wie man diese Änderungen mit der Datenbank verbindet, um die Benutzeraktionen zu behalten. Dies werden wir also in diesem Post tun. Und keine Sorge: Wenn Sie nicht an unserem Vortrag bei „APEX Connect“ teilnehmen konnten, wir werden zunächst alle Voraussetzungen erklären (Wenn Sie nur das Beispiel sehen wollen, schauen Sie sich unseren Arbeitsplatz an).

Die Tabelle erstellen

Wie erwähnt, baut unser Post auf unserem Vortrag auf der Konferenz auf. In unserem Beispiel gab es einen E-Mail-Posteingang. Aus diesem Grund müssen wir zunächst eine Tabelle EMAILS mit diesem SQL erstellen:

CREATE TABLE "EMAILS" (
  "NR" NUMBER(38,0) NOT NULL ENABLE,
  "FROM_USER" VARCHAR2(50),
  "TO_USER" VARCHAR2(50),
  "SUBJECT" VARCHAR2(200),
  "TIME_SENT" TIMESTAMP (6), 
  "TIME_RECEIVED" TIMESTAMP (6), 
  "CONTENT" VARCHAR2(1000),
  CONSTRAINT "EMAILS_PK" 
  PRIMARY KEY ("NR") USING INDEX ENABLE 
)

Erstellen Sie eine Seite und betten Sie jQuery-Dateien ein

Wir möchten hier das dropfähige Feature von jQuery UI verwenden. Daher müssen Sie es von https://jqueryui.com/download/ herunterladen und es auf Ihrem Server hochladen. Danach können Sie eine neue Seite erstellen und die hochgeladene Datei einbetten.

Jetzt können wir eine neue Report-Region erstellen, die unsere E-Mails anzeigt. Verwenden Sie daher dieses SQL:

select
  "NR"  id,
  "SUBJECT" subject,
  "FROM_USER" from_user,
  "CONTENT" content
from EMAILS

Die Vorlagen erstellen

Wir möchten es den Nutzern ermöglichen, Mails aus ihrem Posteingang zu löschen, indem sie diese in ihren Papierkorb verschieben. Verwenden Sie daher das dropfähige Feature von jQueryUI. Wie wir in den Beispielen sehen können (https://jqueryui.com/droppable/) /), ist für das Feature die Verwendung der HTML-Tags <ul>  und  <li>  erforderlich. Aus diesem Grund müssen wir eine benutzerdefinierte Vorlage für unseren Bericht erstellen.

Zuerst erstellen wir eine Vorlage auf Grundlage der Report-Region-Klasse, diese nennen wir sortableListRegion :

Danach müssen wir auch den Inhalt für den #BODY# erstellen – also erstellen wir die benutzerdefinierte Vorlage emailListItem :

Jetzt müssen wir die Vorlage emailList Region noch auf unseren erstellten Report anwenden.

Außerdem fügen wir noch ein wenig CSS auf unsere Seite des Posteingangs hinzu.

li.emailListItem { 
    padding: 0.3em 1em; 
    background-color: #eee; margin-left: -1em; 
} 

span.from_user { 
    display: inline-block; 
    min-width: 120px; 
}

Erstellen Sie den dropfähigen Effekt

Jetzt sehen wir unseren Posteingang, können jedoch nicht mit ihm interagieren – noch nicht. Zuerst fügen Sie einen statischen Inhaltsbereich hinzu, der als Papierkorb dient. Vergessen Sie nicht, ihm eine ID zu geben, um später darauf zu verweisen. Im Beispiel heißt er P20_TRASH.

Jetzt fügen wir JavaScript hinzu:

$("#P20_TRASH").droppable({
  drop: function() {
    $( ".ui-sortable-helper").toggle("highlight");
  }
});

Folgendes macht dieser Code: Zuerst erstellen wir ein jQuery Objekt mit der ID, die wir unserem Papierkorb gegeben haben. Dann wenden wir das dropfähige Widget sowie ein Optionsobjekt auf das Element an. Dieses Objekt enthält nur ein Attribut, das dem Drop-Event eine Callback-Funktion zuweist. Dieses Callback sorgt für die Sichtbarkeit des Helper-Elements, indem es durch eine Markierung gesondert hervorgehoben wird.

Persistenz hinzufügen

Jetzt müssen wir Persistenz hinzufügen, damit beim nächsten Öffnen des Posteingangs durch den Nutzer, die entfernten E-Mails nach wie vorweg sind. Daher erstellen wir zunächst ein verstecktes Seitenelement P20_REMOVE_MAIL_ID, welches als Pufferspeicher fungiert.

Anschließend ändern wir das gerade geschriebene JavaScript, indem wir das Optionsobjekt entfernen:

$( "#P20_TRASH" ).droppable();

Statt eine statische Callback-Funktion zuzuweisen, werden wir das Drop-Event mithilfe einer Dynamic Action aufrufen. Wir könnten all das auch in reinem JavaScript tun, mit einer Dynamic Action ist es allerdings wesentlich bequemer.

Dynamic Action settingsDie erwähnte Dynamic Action wird auf das Drop-Event reagieren und auf Aktionen, einen JavaScript-Code und einen PL / SQL-Code hin ausgeführt werden. Der JavaScript-Code ist folgender:

$(".ui-sortable-helper").toggle("highlight");
$("#P20_REMOVE_MAIL_ID").val(this.browserEvent.srcElement.id);

Vielleicht haben Sie erkannt, dass wir die erste Anweisung bereits benutzt haben, um das gelöschte Element zu verbergen. Die zweite Anweisung ordnet die ID des gedroppten Elements dem soeben erstellten Anwendungsobjekt zu. Es erhält die Element-ID durch das Drop-Ereignis, das aus this und aus der Eigenschaft browserEvent besteht, die auf das Quell-Element und seine ID verweist.

Nur ein Teil des Puzzles ist übriggeblieben. Der PL/SQL-Block. Dieser verwendet den gerade zugewiesenen Wert des Applikationselements innerhalb seiner DELETE-Anweisung. Vergewissern Sie sich, dass Sie dem Feld „Page Items to submit“ die richtige ID hinzufügen, sonst weiß die Datenbank nicht, dass dem JavaScript ein neuer Wert für dieses Feld zugewiesen wurde, und führt somit den DELETE-Befehl nicht aus.

Fertig. Sie können das Endergebnis in unserem Arbeitsplatz anschauen. Wir hoffen, dass dieser Post Ihnen dabei behilflich sein kann moderne UI-Designs zu implementieren. Sie können verschiedene Aktionen wie eine sortierbare Liste im gleichen Stil erstellen, auch wenn Sie mehr als eine Information benötigen. Verwenden Sie einfach mehrere Anwendungselemente und Los geht‘s.