KRZN: Kommunale IT – von Mensch zu Mensch

Inhalte durchsuchen

Formularerstellung und Prüfung: Auswahlliste

Zum guten Start in die neue Woche möchte ich heute die Auswahlliste zu dieser Beitragsreihe hinzufügen.

Nachdem ich heute morgen dem Pseudo-Tag im Allgemeinen einen letzten Schliff gegeben habe, bauen wir allen weiteren Pseudo-Tags darauf auf.

Nachstehen zeige ich wieder das gesamte Pseudo-Tag und werde die hinzugekommenen Teile erläutern.

Zur besseren Unterscheidung der Variablen von Notes-Feldern besitzen Variablen einen Unterstrich als Präfix im Variablennamen. Ausnahme bildet lediglich die Index-Variable der @For-Schleife.

_f := "anrede";
_ff := @GetField("FF" + _f);
_v := "Herr" : "Frau";
_m1 := {Bitte wählen Sie eine Anrede aus};
_l := {Anrede (erforderlich)};

_em :=
@If(formid = ""; "";
_ff = ""; _m1;
"");

_o := {};
_o := _o + {<div class="type-select } + @If(_em != ""; {error}; "")+ {">};
_o := _o + @If(_em != ""; {<strong class="message">} + _em + {</strong>}; "");
_o := _o + {<label for="} + _f + {">} + _l + {</label>};
_o := _o + {<select name="} + _f + {" id="} + _f + {" size="1" title="Bitte auswählen">};
_o := _o + {<option } + @If(_ff = ""; {selected="selected" }; "") + {disabled="disabled">Bitte auswählen</option>};

@For(n := 1; n <= @Elements(_v); n := n + 1;
@Set("_o";
_o + @Char(13) + {<option} + @If(_v[n] = _ff; { selected="selected"}; "") + {>} + _v[n] + {</option>})
);

_o := _o + {</select></div>};
_o Abb. 1 – Gesamtes Pseudo-Tag zur Generierung einer Auswahlliste mit Prüfung und Ausgabe individueller Fehlernachrichten.

Individuell anpassbarer Bereich

Im Vergleich zur Grundversion des Pseudo-Tags kommt hier eine neue Variable für die Speicherung der auswählbaren Daten hinzu. Diese Daten werden in der Variablen „_v“ als Textliste gespeichert und später mit Hilfe einer @For-Schleife nacheinander ausgelesen. Das bedeutet, dass hier bereits die Reihenfolge der Ausgabe festgelegt wird.

_f := "anrede";
_ff := @GetField("FF" + _f);
_v := "Herr" : "Frau";
_m1 := {Bitte wählen Sie eine Anrede aus};
_l := {Anrede (erforderlich)};

Abb. 2 – Ausschnitt des gesamten Pseudo-Tags: Anpassbarer Bereich für Namen, Auswahlwerte, Label und Nachrichten.

Gestaltung des Formularfeldes

Nachstehend sehen Sie die gesamte Ausgabe des Feldes. Diese unterscheidet sich in der Grundversion daher, das hier ein anderer Feldtyp verwendet wird und daher der HTML-Markup etwas variiert.

Die wichtigste Änderung ist allerdings, dass hier eine @For-Schleife auf Basis der „_v“ Variablen durchlaufen wird, um für jeden Listeneintrag eine eigene <option> hinzuzufügen.

_o := {};
_o := _o + {<div"; {error}; "")+ {">};
_o := _o + @If(_em != ""; {<strong>} + _em + {</strong>}; "");
_o := _o + {<label for="} + _f + {">} + _l + {</label>};
_o := _o + {<select name="} + _f + {" id="} + _f + {" size="1" title="Bitte auswählen">};
_o := _o + {<option } + @If(_ff = ""; {selected="selected" }; "") + {disabled="disabled">Bitte auswählen</option>};

@For(n := 1; n <= @Elements(_v); n := n + 1;
@Set("_o";
_o + @Char(13) + {<option} + @If(_v[n] = _ff; { selected="selected"}; "") + {>} + _v[n] + {</option>})
);

_o := _o + {</select></div>};
_o

Abb. 3 – Ausschnitt des gesamten Pseudo-Tags: Gestaltung des HTML-Markups

Sonderfall: Asynchrone Werte für Übermittelung und Anzeige

Manchmal kann es hilfreich sein dem Benutzer lesbare Werte zur Auswahl anzuzeigen, allerdings zur Weiterverarbeitung andere Werte zu übertragen.

Um das zu erreichen, benötigen wir eine zusätzliche Variable „_vs“, welche die zu übermittelnden Werte enthält.

Ganz Konkret sieht der anpassbare Bereich des Pseudo-Tags dann so aus:
_v := "Deutschland" : "Frankreich" : "Vereinigtes Königreich";
_vs := "de" : "fr" : "uk"; Abb. 4 – Ausschnitt des gesamten Pseudo-Tags: Erweiterter anpassbarer Bereich

Folglich muss die @For-Schleife leicht angepasst werden. Sie wird um das <value> Attribut der Einträge erweitert.
@For(n := 1; n <= @Elements(_v); n := n + 1;
@Set("_o";
_o + @Char(13) + {<option value="} + _vs[n] + {"} + @If(_v[n] = _ff; { selected="selected"}; "") + {>} + _v[n] + {</option>})
); Abb. 5 – Ausschnitt des gesamten Pseudo-Tags: Erweiterte @For-Schleife

Ich hoffe ich konnte hier umfassenden Einblick in die Erstellung von Auswahllisten und deren Sonderfall geben.

Über eine Diskussion und Kritik würde ich mich freuen.

Autor: Sven Schüring
Kategorien: CMS, eGovernment-Suite - Tags: 1.3, Barrierefreies Internet, Beispiel, CMS — 28.11.2011 um 11.58 Uhr