Overview Example: Selecting multiple contact persons Our dropdown for selecting a single contact person looks like this: ABAP HTML
We add "multiple" here and specify by size="7" that up to 7 entries are to be displayed at the same time: HTML
And already the user can select multiple values, whereby the
selection of additional values on the desktop is done with
Ctrl+Click; in Tablet and Phone the browsers have different
representations of the multiple dropdown.
This is because a list of partner numbers is now sent to the application instead of a single partner number, which has no place in the single field "parnr". We therefore define another string variable "parnrlist":
data: and put it as a variable in <select>: HTML Now the input works and our variable "parnrlist" receives all selected key values as value, each separated by a comma. Here is the display in the ABAP debugger:
Representation by checkboxes The standard display of the multiple-dropdown in the browser is not very popular with users, at least on the desktop, because the Ctrl key must be pressed to check several values, and if one forgets to do so, all previous selections are deleted. With long lists, it is also easy to lose track of what you have selected. Let's take our example of the country selection again, now as a multiple selection:
HTML
By making two small additions to HTML, we can achieve the following display, which is more pleasant for the user:
Here the value selection is done by checkboxes and the current selection is displayed above the checkboxes. HTML The second <div> element with CSS class "selectlist" contains the display of the value list in the form of checkboxes. Through the style attributes, we ensure that a vertical scroll bar is displayed if required. You can also choose the display via checkboxes without the upper value display bar by omitting the first <div> with CSS class "selecttext". For extensive lists of values, it is also convenient to show two small pushbuttons that select all values or delete all selections:
This is achieved by displaying two icons "select_all.png" and "deselect_all.png" which, when clicked, select or deselect all values with the help of the function S10DropdownSelectAll():
<img
src="../../../icons/select_all.png"
<div class="selecttext" style="width: 240px; white-space: normal;"></div>
Filter values Example:
For implementation, it is sufficient to add an input field of the class "selectfilter":
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">
Dynamic expansion of the entire list On small devices, sections that are scrollable by themselves are somewhat complicated to handle. On the other hand, extensive lists of values take up a lot of space if they are displayed without scrolling. An elegant way out is to show the value list only when needed. This can be done quite easily with HTML5 and, like all the previous variants, is completely independent of the ABAP level. As an example, let's take a list of possible participants in a meeting. At first, we only show the participants selected so far:
We can see the participants already entered at a glance and click on "Change participant list" to make changes: The entire list of participants is displayed and we can use
the convenient screen scrolling for very long lists. To implement this, we use the HTML5 functions <details> and
<summary>, which automatically show and hide sub-areas: |
Components: S10 Framework |