Übersicht
Dropdown-Listen mit der Möglichkeit, einen einzelnen Wert auszuwählen, sind im Abschnitt Dropdown-Listen beschrieben. Wir bauen darauf auf und ermöglichen die Auswahl mehrerer Werte durch den Benutzer.

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
data:
   kunnr        
type kna1-kunnr,
   parnr        
type knvk-parnr,
   ddl_contacts
 type string.

HTML
<select class="inputselect"  name="parnr" data-s10dropdownlist="ddl_contacts" data-s10options="hidekeys"></select>

 

Wir ergänzen hier "multiple" und legen durch die Angabe size="7" fest, dass bis zu 7 EInträge gleichzeitig angezeigt werden sollen:

HTML
<select class="inputselect"  name="parnr"
      data-s10dropdownlist
="ddl_contacts" data-s10options="hidekeys" multiple size="7">
</
select>

       

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:
   kunnr        
type kna1-kunnr,
   parnr        
type knvk-parnr,
   parnrlist    
type string,

   ddl_contacts
 type string.

und setzen diese als Variable in <select> ein:

HTML
<select class="inputselect"  name="parnrlist"
      data-s10dropdownlist
="ddl_contacts" data-s10options="hidekeys" multiple size="7">
</
select>

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.


Darstellung durch Ankreuzfelder
Die Standarddarstellung des multiple-dropdown im Browser ist zumindest auf dem Desktop bei Benutzern nicht sonderlich beliebt, da zum Ankreuzen mehrerer Werte die Ctrl-Taste gedrückt werden muss, und wenn man das vergisst, alle bisherigen Selektionen gelöscht sind. Bei langen Listen verliert man auch leicht die Übersicht, was man selektiert hat.

Dazu nehmen wir wieder unser Beispiel der Länderauswahl, jetzt als Mehrfachselektion:

ABAP
data:
 land1 
type kna1-land1.

HTML
<label class="label output" name="land1"></label><br>
<select class="inputselect" name="countrylist" multiple size="12"
    
style
="width: 240px;"
     data-s10dropdownlist='land1@dropdownlist'>
</select>

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
<label class="label output" name="land1"></label><br>
<select class="inputselect" name="countrylist" multiple size="12"
         style="width: 240px;"
       
data-s10dropdownlist='land1@dropdownlist'>
</select>

<div class="selecttext" style="width: 240px;"></div>
<div class="selectlist" style="width: 240px; max-height: 200px; overflow-y: auto; overflow-x: hidden; border: 1px solid lightgray;"></div>

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.

Das zweite <div> Element mit CSS-KLasse "selectlist" enthält die Darstellung der Werteliste in Form von Ankreuzfeldern. Durch die style-Attribute sorgen wir dafür, dass bei Bedarf ein vertikaler Scrollbar angezeigt wird.

Sie können die Darstellung über Ankreuzfelder auch ohne die obere Werte-Anzeige-Leiste wählen, indem Sie den ersten <div> mit CSS-KLasse "selecttext" weglassen.

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"
  style="height: 24px; border: 1px solid lightgray; padding: 2px; margin: 2px 0px;"
 
onclick="S10DropdownSelectAll(this);"
 
title="Alle selektieren">

<img src="../../../icons/deselect_all.png"
  style="height: 24px; border: 1px solid lightgray; padding: 2px; margin: 2px 6px;"
 
onclick="S10DropdownSelectAll(this, false);"
 
title="Alle deselektieren" />


Die Anzeigeleiste für die Werte schneidet ab der angegebenen Breite die weiteren Werte ab. Falls Sie stattdessen lieber weitere Zeilen mit allen Werten anzeigen, geht das mit dem CSS-Stil "white-space:normal":

<div class="selecttext" style="width: 240px; white-space: normal;"></div>

 

Werte filtern
Falls viele Werte zur Auswahl angeboten werden, können Sie dem Benutzer anbieten, die Werte durch Angabe eines Suchstrings zu 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="&#x1F50E;" type="search">

 

Dynamisches Aufklappen der gesamten Liste
Auf kleinen Geräten sind Teilbereiche, die für sich scrollbar sind, etwas kompliziert zu handhaben. Andererseits nehmen umfangreiche Wertelisten, wenn man sie ohne zu Scrollen anzeigt, viel Platz ein. Ein eleganter Ausweg ist, die Werteliste nur bei Bedarf einzublenden. Das ist mit HTML5-Mitteln ziemlich einfach möglich, und ebenso wie alle bisherigen Varianten gänzlich unabhängig von der ABAP-Ebene.

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.
 
WIr nehmen zwei weitere Teilnehmer dazu und schließen die Liste:
 

Zur Implementierung nutzen wir die HTML5-Funktionen <details> und <summary>, die das Ein- und Ausblenden von Teilbereichen automatisch durchführen:

HTML

<label class="label">Teilnehmer</label><br>
<select class="inputselect" name="parnrlist" multiple
    
data-s10dropdownlist="ddl_contacts" data-s10options="hidekeys">
</select>
<div class="selecttext" style="width: 240px; white-space:normal; color: #3f00ff; font-size: 14px; font-weight: bold;"></div>
<details>
 
<summary style="font-size: 13px;">
     Teilnehmerliste ändern
  
</summary>
   <div class="selectlist" style="width: 240px;  border: 1px solid lightgray;"></div>
</details>


Komponenten: S10 Framework