Übersicht Im Prinzip geschieht das durch den HTML-Zusatz "multiple" im select-Tag. Es ist aber doch einiges an Details zu beachten und es gibt interessante zusätzliche Optionen. Wir beginnen mit einem Beispiel. Beispiel: Auswahl mehrerer Ansprechpartner Unser Dropdown zur Selektion eines einzelnen Ansprechpartners sieht wie folgt aus: ABAP HTML
Wir ergänzen hier "multiple" und legen durch die Angabe size="7" fest, dass bis zu 7 EInträge gleichzeitig angezeigt werden sollen: HTML
Und schon kann der Benutzer mehrere Werte auswählen, wobei die Auswahl zusätzlicher Werte auf dem Desktop mit Ctrl+Click erfolgt; in Tablet und Phone haben die Browser andere Darstellungen des multiple-Dropdowns. Allerdings funktioniert es so noch nicht ganz, denn wir erhalten bei der Eingabe von mehr als einem Wert aus dem S10 Framework die Fehlermeldung Das liegt daran, dass nun statt einer einzelnen Partnernummer eine Liste von Partnernummern an die Anwendung gesendet wird, die in dem einzelnen Feld "parnr" keinen Platz hat. Wir definieren uns deshalb noch eine String-Variable "parnrlist":
data: und setzen diese als Variable in <select> ein: HTML Damit funktioniert nun die Eingabe und unsere Variable "parnrlist" erhält als Wert alle ausgewählten Schlüsselwerte, jeweils durch Komma getrennt. Hier die Anzeige im ABAP Debugger: Wie immer bei der Variablenbindung im S10 Framework funktioniert das in beiden Richtungen, d.h. wenn wir die Variable "parnrlist" mit einer Liste von Partnernummern besetzen, sind in dem multiple-dropdown die entsprechenden Zeilen selektiert.
Dazu nehmen wir wieder unser Beispiel der Länderauswahl, jetzt als Mehrfachselektion: ABAP HTML Durch zwei kleine Ergänzungen in HTML können wir folgende für den Benutzer angenehmere Darstellung erreichen: Hier erfolgt die Werteselektion durch Ankreuzfelder, und die aktuelle Auswahl wird oberhalb der Ankreuzfelder angezeigt. HTML Das erste <div> Element mit CSS-Klasse "selecttext" enthält
die bisher selektierten Werte. Falls die Anzeige ohne
Darstellung der Schlüsselwerte, also der Länderkennzeichen
erfolgt, werden hier die Texte eingestellt. Für umfangreiche Wertelisten ist es zusätzlich angenehm, zwei kleine Drucktasten einzublenden, die alle Werte selektieren oder alle Selektionen löschen: Das erreichen Sie durch das Einblenden zweier Icons "select_all.png" und "deselect_all.png", welche bei einem Klick mit Hilfe der Funktion S10DropdownSelectAll() alle Werte selektieren oder de-selektieren:
<img
src="../../../icons/select_all.png"
<div class="selecttext" style="width: 240px; white-space: normal;"></div>
Werte filtern Beispiel:
Zu Implementierung genügt es, ein Eingabefeld der Klasse "selectfilter" dazuzunehmen:
select class="inputselect" multiple
name="visit_zmkey_list" data-s10dropdownlist='ddl_zms' data-s10options='hidekeys'>
</select>
<div class="selecttext" style="width: 300px;"></div>
<div class="selectlist"
style="width: 300px; height: 160px; overflow-y: auto;
overflow-x: hidden; border: 1px solid lightgray;">
</div>
<input class="selectfilter" placeholder="🔎" type="search">
Dynamisches Aufklappen der gesamten Liste Als Beispiel nehmen wir eine Liste von möglichen Teilnehmern an einer Besprechung. Zunächst zeigen wir nur die bisher ausgewählten Teilnehmer an:
Wir sehen auf einen Blick die schon eingetragenen Teilnehmer und Klicken zum Ändern auf "Teilnehmerliste ändern": Die gesamte Teilnehmerliste wird eingeblendet und wir können
das bequeme Bildschirmscrollen bei sehr langen Listen nutzen. Zur Implementierung nutzen wir die HTML5-Funktionen
<details> und <summary>, die das Ein- und Ausblenden von
Teilbereichen automatisch durchführen: |
Komponenten: S10 Framework |