Domino 9 und frühere Versionen > ND6: Entwicklung
Dynamische Dialoglisten im Web, ohne Seite neu zu laden
machineslave:
Hallo,
ich habe folgendes Problem:
Gegeben ist ein Web-Formular, in welches der User seine Daten in seinem Personendokument im Adressbuch pflegen/ändern kann.
Dort gibt es untereinander abhängige Auswahllisten für (Abhängigkeit in Reihenfolge:)
1. Firma
2. Kostenstellengruppe
3. Kostenstelle
4. (berechnetes Textfeld) Kostenstellen-Nummer
Als Vorgabewert soll natürlich das ausgewählt sein, was auch im Adressbuch eingetragen ist.
Das Problem ist allerdings, dass das Feld "Kostenstellengruppe" nicht im N&A gespeichert ist und über diverse Lookups erst geladen werden muss.
Beim erstmaligen Laden der Form wird zwar die richtige Firma vorselektiert, aber die anderen Auswahllisten sind leer. Erst, wenn ich einmal die Auswahl im Feld Firma ändere (und wieder zurück), werden die richtigen Werte geladen.
Desweiteren habe ich das Problem, dass nach Auswahl eines anderen Wertes für den User nicht direkt ersichtlich ist, dass die Form neu geladen wird (change choices on document refresh ...)
Dadurch heisst es dann natürlich: "Geht nicht".
Nun meine eigentliche Frage:
Was mir vorschwebt ist, die kompletten Auswahllisten direkt zu Anfang zu laden und dann beim onChange-Event der jeweiligen Auswahllisten die anderen Listen dynamisch neu zu befüllen.
Hat das schonmal jemand gemacht, bzw. hat jemand eine Idee, wie ich da am sinnvollsten rangehe (mit JavaScript)?
(Auf keinen Fall möchte ich die Sache mit dem neuladen des Dokumentes beibehalten)
Danke und Gruß
Stefan
datenbanken24:
Das geht, ist aber mit etwas Aufwand verbunden.
(Beispiel-Link am Ende...)
1)
Beim Öffnen der Maske ziehst Du Dir alle möglichen "Werte-Paare" zusammen,
z.B. über DbLookups oder WQO
Alternativ (so machen wir es), liegen die Möglichkeiten schon irgendwo zusammengepackt vor. z.B in einem Konfigurationsdokument.
Du hast dann eine Liste in der Art:
Oberkategorie_1=Unterkategorie_1_1~Unterkategorie_1_2~Unterkategorie_1_3~... :
Oberkategorie_2=Unterkategorie_2_1~Unterkategorie_2_2~Unterkategorie_2_3~...
z.B:
"Dänemark=Bornholm~Djursland~Falster~Färöer~Fünen~Jütland~Langeland":
"Deutschland=Allgäu~Bodensee~Eifel~Franken~Hamburg" :
...
2)
Aus den jeweiligen Oberkategorien füllst Du Deine 1. Dialogliste.
In diesem Fall wären das die Länder.
@Word( _ValueList; "="; 1);
Dieses Feld heißt im Beispiel "Line_1_Keyword"
3.)
Über eine Pass Thru HTML - computed value schreibst Du über @Formeln dynamisch ein Javascript-Array in Deine Webseite, welches genau die Unterkategorien enthält, beginnend bei [1].
arrModels[1] = "Bornholm;Djursland;Falster;Färöer;Fünen;Jütland;Langeland";
arrModels[2] = "Allgäu;Bodensee;Eifel;Franken;Hamburg" ;
Hier eine Beispiel-@Formel, die Dir aus Deiner Wertepaare-Liste das Javascript-Array schreibt:
_SecondCategory := @Word( _ValueList; "="; 2);
_Elem := @Elements( _SecondCategory);
_n := 0;
@NewLine +
"<script language=JavaScript>" + @NewLine + @NewLine +
"var arrModels = new Array(); " + @NewLine +
@Implode(
@Transform( _SecondCategory; "x"; @Do(
_n := _n + 1;
("arrModels[" + @Text(_n) + "] = \"" + @ReplaceSubstring( x ; " ~" : "~ " : "~"; ";") +
"\";"))
); @NewLine) +
@NewLine +
"</script>" + @NewLine
4.)
Du baust ein Feld in die Maske
In diesem Beispiel ""Line_1_Depand"
Text, editable, Default vaue: Line_1_Depand,
vollständig hidden in Notes und im Web
5.)
Du baust ein Feld in die Maske
In diesem Beispiel "Line_2_Keyword"
Text, editable,
vollständig sichtbar in Notes und im Web,
ABER mit dem HTML-Tag "type=hidden"
6.
Man benötigt weiterhin eine computed value, Pass thru HTML:
"<select name=\"Line_1_Depand\" class=\"searchfield\">" + @NewLine +
"<option value=\"all\">alle</option>" + @NewLine +
"<option value=\"\"></option>" + @NewLine +
"</select>"
7.
Die Maske darf NICHT die Eigenschaft haben: "generate HTML for all fields"
8.)
onchange="ChooseMake":
Im onChange Event des 1. Dialogs (= Line_1_Keyword)
(geht übrigens genau so gut mit Checkboxen und Radiobuttons)
rufst Du diese nette JS-Funktion auf:
function ChooseMake(boolHeadContained)
{
var arrModelList;
var objModelSelection;
var objMakeSelection;
var intOffSetForAll;
var i;
if (document.forms[0].Line_1_Depand == null) {
return;
}
objModelSelection = document.forms[0].Line_1_Depand;
objMakeSelection = document.forms[0].Line_1_Keyword;
objModelSelection.selectedIndex = 0;
objModelSelection.options.length = 1;
if (boolHeadContained)
intOffsetForAll = 1;
else
intOffsetForAll = 0;
if (objMakeSelection.selectedIndex >= intOffsetForAll){
arrModelList = (arrModels[objMakeSelection.selectedIndex + 1 -
intOffsetForAll]).split(';');
for (i = 0; i < arrModelList.length; i++){
objModelSelection.options.length = i+2;
objModelSelection.options[i+1].value = arrModelList
objModelSelection.options[i+1].text = arrModelList
}
}
if( document.forms[0].Line_2_Keyword.value != "" ) {
objModelSelection.value = document.forms[0].Line_2_Keyword.value
}
} // ChooseMake
9.)
Diese Funktion gehört dementsprechend dann in den JSHeader der Maske.
Das war's dann.
Kein ganz leichter Spaß, aber es funktioniert gut.
Das Ergebnis exakt dieser Methode siehst Du z.B unter:
http://www.privatevillas.de/fewo.htm
Und wenn Du nach dieser Aktion dringend Urlaub brauchst,
bist Du dort auch gleich richtig...
Viel Erfolg,
Gruß,
Uwe
machineslave:
Hallo Uwe,
danke erstmal für die ausführliche Hilfe. Das ist ja schon ein ganz schöner Brocken.
Ich hab's mir mal auf Deiner Seite angeschaut, ist sehr gut gemacht.
Allerdings muss ich wohl noch einiges an Gehirnschmalz reinstecken, da bei mir die 3. Kategorie ebenfalls in Abhängigkeit von der 2. dynamisch ist. (Bei Dir ist ja die 3. Kat. "Objektart" immer gleich).
Ich werd mal versuchen, ob ich das mit mehrdimensionalen Arrays (und da eine Mischung zwischen "normalen" und assoziativen) hinbekomme.
Gruß
Stefan
datenbanken24:
Mittlerweile ist so etwas ein Parade-Beispiel für AJAX.
Ich würde also fast empfehlen, das "Schmalz" auf die oben gepostete Lösung zu sparen und es lieber gleich mit dieser neueren Technik zu versuchen.
Die Anforderung schreit gerade zu nach AJAX - wer posted das erste Domino-Beispiel hierfür im atnotes-Forum... ?
Gruß,
Uwe
Glombi:
Ajax, Das hört sich interessant an.
Hier mal als Einstieg folgendes - Ajax and Domino
http://ajaxpatterns.org/Lotus_Notes_Ajax_Frameworks
Ich denke, wir sollten da einen eigenen Thread machen.
Andreas
Navigation
[0] Themen-Index
[#] Nächste Seite
Zur normalen Ansicht wechseln