Der Dialog-Selbstbaukasten für das Web
Ein typisches Problem bei der Erstellung komplexer, browserbasierter Domino-Anwendungen ist die Implementierung eines Adressauswahldialoges. Deshalb wollen wir den jNotes-Lesern an dieser Stelle einen Adressdialog zur Verfügung stellen, der ähnlich wie im Notes-Client die komfortable Auswahl von Namen oder Gruppen ermöglicht und auch für eine größere Zahl von Adressbucheinträgen (1000+) performant ist.
Die Dialog kann z.B. verwendet werden, um über das Web Autoren oder Leser für ein Dokument auszuwählen oder Adressaten für eine E-Mail in das "SendTo"-Feld einzutragen. Auf den folgenden Seiten wird der Dialog mit allen Funktionen sowie der JavaScript-Code erläutert. Außerdem findet Ihr hier eine Beispieldatenbank zum Testen. Der Platz in diesem Artikel reicht allerdings nicht um alle JavaScripte zu beschreiben. Daher am besten einfach die Demo herunterladen und durchstöbern.
Auswahl einzelner Namen oder Gruppen
 Auswahl einzelner Namen oder Gruppen |
Der Dialog kann benutzt werden, um einen einzelnen Namen auszuwählen und in ein Feld zu schreiben. Der Name kann per Doppelklick oder über den "OK"-Button übenommen werden. "Cancel" schliesst das Fenster. Im unteren Bereich befindet sich eine Schnellsuche. Tragt hier einen Vor- oder Nachnamen oder nur die ersten Buchstaben eines Vor- oder Nachnamens ein und klickt danach das jeweilige Feld für die Suche an. Alle gefundenen Namen werden nun an die erste Stelle des Auswahlfeldes gerückt.
Auswahl mehrerer Namen oder Gruppen
Hier ist der komplette Dialog für eine Mehrfachauswahl dargestellt:
 Dialog für eine Mehrfachauswahl |
Die Namen werden dabei auf zwei verschiedene Arten in das Namensfeld geschrieben: getrennt durch Komma oder getrennt durch Zeilenumbruch. Zwischen diesen beiden Arten wird beim Aufruf des Dialogs unterschieden. Es wird also immer derselbe Dialog benutzt.
Im Dialogfenster können links mehrere Werte gewählt und per "Hinzufügen"-Button in das rechte Feld übernommen werden. Einzelne Werte können wie im Notes-Client per Doppelklick übernommen werden. Ein Doppelklick im rechten Feld löscht den Eintrag. Namen die bereits auf der rechten Seite stehen, werden nicht noch einmal hinzugefügt. Es werden also immer nur die Werte übernommen, die noch nicht im rechten Feld stehen. Der "OK"-Button schreibt die Werte ins Zielfeld und schliesst den Dialog.
Einsatz des Auswahldialoges
Die Einbindung des Auswahldialogs in Eure Anwendungen ist sehr einfach. Ihr braucht dazu ein Feld, in das die Namen geschrieben werden sollen sowie einen Button, der den Dialog aufruft. In diesen Button kommt der Aufruf in folgender Form:
| 1. | Feldname |
| 2. | Sollen bei einem Aufruf aus dem Namens- und Adressbuch die Gruppen angezeigt werden? - "YES/NO" (Der Parameter ist egal, wenn wir die Namen woanders herholen.) |
| 3. | Breite |
| 4. | Höhe |
| 5. | Separation Character - Derzeit "comma" und "break", also Komma oder Zeilenumbruch. Das bewirkt, dass die Namen nebeneinander oder untereinander ins Feld geschrieben werden. |
In den JS-Header kommt die Funktion für den Aufruf:
function addName(FieldName, Groups, width, height, sChar) {
var left = Math.floor( (screen.width - width) / 2);
var top = Math.floor( (screen.height - height) / 2);
var params = "top=" + top + ",left=" + left + ",height=" + height + ",width=" + width;
var URL1 = "Mselect?openform&sChar="+ sChar;
var URL2 = "Mselect?openform&groups=yes&sChar="+ sChar;
accessField = FieldName ;
if ( Groups != "yes" ) {
var w = window.open( URL1 ,"Select", params);
} else {
var w = window.open( URL2,"Select", params);
}
Die Funktion im Detail
Eine Variable, auf die wir in der Dialogmaske zugreifen, um herauszufinden, in welches Feld wir zurückschreiben müssen. Die ersten drei Zeilen der Funktion dienen dazu, das Fenster zentriert zu öffnen. Dadurch klebt es nicht in irgendeiner Ecke. Aus der Höhe und Breite werden die Location-Werte ermittelt. Dann werden die Angaben für die Position zusammen mit den Größenangaben in eine Variable "params" geschrieben, die der window.open()-Funktion übergeben werden.
Die unterschiedlichen URLs dienen der Unterscheidung zwischen einer Anzeige mit Gruppen und ohne Gruppen. Der Parameter "groups" wird dazu an die URL zum Öffnen des Fensters gehangen und in der geöffneten Maske wieder aus dem Query_String gepuzzlet. Mehr dazu in der Auswahlmaske. Der Separation Character wird auf dieselbe Art übergeben. Dann schreiben wir den Feldnamen in die "accessField"-Variable und öffnen die Auswahlmaske.
Die Auswahl
Zwei Felder und vier Buttons (ohne Schnellsuche, die später kommt): Feld "Namen" - Dialog List (links) und Feld "Auswahl" - Dialog List (rechts). In unserer Demo werden die Namen aus einer Ansicht in der Demo-Datenbank gezogen. Der eigentliche Sinn ist es natürlich, die Namen und/oder Gruppen aus dem Namens- und Adressbuch zu holen. Wenn Ihr die Datenbank auf Eurem Domino-Server testen wollt, ersetzt Ihr die Auswahlformel des Namensfeldes durch diese Formel:
_viewG := "($VIMGroups)";
_db := "names.nsf";
_server :=@Subset(@DbName;1);
_namen :=@DbColumn("";_server:_db;_view;1);
_groups := @If(Groups="yes";@DbColumn("";_server:_db;_viewG;1);"");
_namen : _groups
Da wir den "Gruppenparameter" an die URL gehängt haben, können wir ihn in einem berechneten Feld in der Maske anzeigen lassen (verborgen) und in unserer Fomel auswerten. In dieser Maske heißt das Feld "Groups" und wird benutzt, um zu unterscheiden, ob wir auch Gruppen anzeigen.
Dialog-Demo zum Ausprobieren
Hier also eine Demo zum Download, Durchstöbern und Ausprobieren: Download "DialogDemo.nsf". Fragen dazu am besten unter "Dialog-Demo" in das Forum posten oder Kontakt ausfüllen.
Öffnet die Datenbank einfach über "Database->Preview in Webbrowser" oder öffnet das Frameset direkt aus dem Designer. In dieser Version wurde ein Fehler im JavaScript behoben, der dazu führte, dass der Dialog nur aus einer Maske, aber nicht aus einem bereits gespeicherten Dokument geöffnet werden konnte (Besten Dank an Ralph Nowitzki von Delphi für den Hinweis und den Lösungsvorschlag). Ausserdem wurde der Datenbank eine Maske hinzugefügt (SingleSelection2), in der demonstriert wird, wie man die 64Kb-Obergrenze für @DbLookup-Formeln umgehen kann.
Abgelegt unter:
Bewerten Sie diesen Artikel:
Senden Sie einen Kommentar